vue-router學習
vue-router使用步驟(本教程並不全面,只研究到了本人夠用的程度,如果還想要深入瞭解路由,請在vue router 文件中學習):
-
手動:
-
npm 安裝 vue-router
npm install vue-router
-
配置路由
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 })
-
在main.js中應用該router例項
1. 引入例項 `import router from "./router"` 1. 使用該例項 new Vue({ ...... router, ...... })
-
在頁面中用
<router-view></router-view>
來放置路由展示部分的html -
在頁面中使用路由
<router-link to="/home"></router-link> // “/home”要與 routers中的path一致
-
npm 安裝 vue-router
-
vue ui 輔助 (初學者不建議使用該方法)
- 在vue ui 外掛頁面右上角點選新增vue-router
- 萬事大吉
-
額外知識點
npm 執行時 如果main.js的vue例項中沒有 render 配置項則需要在vue.config.js檔案中額外設定 runtimeCompiler 配置項為 true。(這個配置項設定為true後會使得專案最終打包檔案大10kb 不建議使用該方法)