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一致vue ui 辅助 （初学者不建议使用该方法）在vue ui 插件页面右上角点击添加vue-router万事大吉额外知识点 npm 运行时 如果main.js的vue实例中没有 render 配置项则需要在vue.config.js文件中额外设置 runtimeCompiler 配置项为 true。（这个配置项设置为true后会使得项目最终打包文件大10kb 不建议使用该方法）