vue-router學習

vue-router使用步驟(本教程並不全面，只研究到了本人夠用的程度，若是還想要深刻了解路由，請在vue router 文檔中學習)：

• 手動：

  1. npm 安裝 vue-router npm install vue-router

  2. 配置路由

     1. 在main.js同級目錄下（目錄結構不必定要和我徹底同樣）新建router.js；
     2. 在router.js中引用vue 和 vue-router 並 用vue.use（）在vue中使用該插件
         import vue from  "vue"
         import router from "vue-router"
         vue.use(router)
     3. 引入須要配置的頁面（可選）
         import Home from "./views/Home.vue"
     4. 在router.js中配置路由
         1. 路由配置格式
             let routers = [
                 {
                     path:"/",
                     name:"home", //可選
                     component:Home //已經引入能夠用這中方法
                 },
                 {
                     path:"/about",
                     name:"about", //可選
                     component:()=> import("./views/About.vue")  
                             //沒有提早引入的頁面能夠用該方法引入
                 }
             ]
         2. 實例化該配置
             export default new router({
                 routers
             })

  3. 在main.js中應用該router實例

     1. 引入實例 `import router from "./router"`
     1. 使用該實例 
         new Vue({
             ......
             router,
             ......
         })

  4. 在頁面中用 <router-view></router-view> 來放置路由展現部分的html

  5. 在頁面中使用路由

     <router-link to="/home"></router-link>
         // 「/home」要與 routers中的path一致

• vue ui 輔助 （初學者不建議使用該方法）

  1. 在vue ui 插件頁面右上角點擊添加vue-router
  2. 萬事大吉
• 額外知識點 npm 運行時 若是main.js的vue實例中沒有 render 配置項則須要在vue.config.js文件中額外設置 runtimeCompiler 配置項爲 true。（這個配置項設置爲true後會使得項目最終打包文件大10kb 不建議使用該方法）