vue-router學習

摘要： vue-router使用步驟(本教程並不全面，只研究到了本人夠用的程度，如果還想要深入瞭解路由，請在vue router 文件中學習)： 手動： npm 安裝 vue-routernpm instal...

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

• 手動：

  1. npm 安裝 vue-routernpm 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 不建議使用該方法）