vue路由vue-router

完整网址http://localhost:80/MzyPractice/chapter10/testb.php?name=Mei&radio=Test#dowel1,传输协议:http,https2,域名:localhost3,端口:默认if不填端口号80使用4.路径：/MzyPractice/chapter10/testb.php。/表示根目录5、查询参数：?name=Mei&radio=Test6。哈希值：#dowel前端路由1.什么是前端路由？是相对于后端路由的概念，是开发SPA单页应用模块的必备核心。本质：路由地址与组件的映射2.好处更好的用户体验，更好的性能3.实现原理Url-basedhash基于html5历史模式apihash：页面不刷新，有访问记录Vue-router官方路由和Vue.js核心深度集成，开发SPA推荐介绍支持hash模式和html5history模式支持嵌套路由支持程序化路由支持路由参数支持命名路由步骤1.安装vue-routernpminstallvue-router--save2.importvue-router，并安装插件importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)3.配置路由规则，创建路由实体importFoofrom'./views/Foo'import好从'。/views/Good'constrouter=newVueRouter({routes:[//路由规则是一个对象，至少包含路径和组件两个属性{path:'/foo',component:Foo},{path:'/good',component:Good}]})4.关联Vue实例constapp=newVue({router}).$mount('#app')最佳实践1.添加路由规则目录routes2。为了性能，必须使用lazyLoad//src/routes/base.js中的代码如下：exportdefault[{path:'baseLogin',name:'baseLogin',component:()=>import('@/views/base/Login.vue')}];//src/router.js中的代码如下：importbasefrom'@/routes/base.js'constrouter=newVueRouter({routes:[//一条路由规则是一个对象，至少包括path和component两个属性..base]})exportdefaultrouterrouteredirectionconstrouter=newVueRouter({routes:[//路由规则是一个对象，至少包含路径和组件两个属性{path:'/',redirect:'/foo'},{path:'/foo',component:Foo},{path:'/good',component:Good}]})嵌套路由本质：组件中嵌套组件，父组件必须存在嵌套可以显示子组件//路由规则定义constrouter=newVueRouter({routes:[{path:'/user/:id',component:User,children:[{//当/user/:id/profile匹配成功,//UserProfile会渲染到User的path:'profile',component:UserProfile},{//当/user/:id/posts匹配成功//UserPosts会渲染到User的:'posts',组件:UserPosts}]}]})constUser={template:`

User{{$route.params.id}}