vue組件與路由的使用步驟



router:根據不同的地址跳轉到不同的頁面
一、vue-router的使用
1.下載路由模塊      npm vue-router --save
2.在router.js中
  先引入路由    import Router from 'vue-router'
  接着通過use在vue全局注冊使用    Vue.use(Router)
  最后將路由表導出  export default new router({ })

3.在main.js中引入路由組件   import router from './router'
4.以參數的形式寫到根目錄中 在vue實例對象中聲明router  

5.最后在App.vue的模板中設置路由出口    <router-view></router-view>

二、添加組件步驟:

1.在src的components下添加組件 apple.vue
2.在app.vue的script標簽
  引入 新添的組件 import apple from './componets/apple'
  在data后注冊每個組件 components:{apple}
  在template標簽里用組件名寫一個標簽<apple></apple>

3.通過命令npm run dev 運行項目查看組件是否添加成功

三、將組件添加到路由表的步驟:
1.安裝路由 npm install vue-router --save
2.將components里的組件引入配置到router.js中
  先引入組件    import...
  再配置路由路徑
3.在main.js中使用router
  先引入路由   import...
  再在vue實例中指定router
4.在App.vue中模板中添加路由鏈接 router-link和出口router-view


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM