v-router學習筆記

在模塊化機制中使用v-router

一. 用腳手架構建項目(v-cli版本2.x)

vue init webpack myvuejsproject
//myvuejsproject爲項目名稱

建立項目時須要輸入的信息詳解：

初始化項目後的樣子

二. 在項目中使用v-router

(用腳手架構建初始化項目完後其實項目中已經配好的v-router，但爲了熟練v-router的使用咱們本身手動配置使用v-router)

步驟：先在router文件夾中的index.js中 導入路由對象，調用 Vue.use(VueRouter)，再 建立路由實例，並 傳入路由映射而後再main.js中的Vue實例中 掛載建立的路由實例

1. 導入路由對象，並調用Vue.use(VueRouter)

   Vue.use(VueRouter)

2. 建立路由實例，而且傳入路由映射配置

   // 建立VueRouter對象
   const routers = [];
   
   const router = new VueRouter({
             routers
   })

3. 在Vue實例中掛載建立的路由實例

   import router from './router/index';
   new Vue({
                                           el: '#app',
                                           router,//掛載建立的路由實例
                                           components: {
                                           App
             },
             template: '<App/>'
   })

圖片來源於codewhy老師的學習視頻