VueRouter——命名路由-嵌套路由-重定向（二）

前言本章介绍路由的三个相关知识点，如题。路由是开发中非常重要的一部分。学习路由，不仅要能看懂路由，还要写清楚。这样不管是以后维护别人的代码，还是别人维护你的代码，都会方便很多。1.命名路由router.js:{path:'/new',name:'new',component:()=>import("../components/new.vue")},app.vue:Latestrelease作用：2.嵌套路由是什么意思？往下看：router.js:{path:'/hy',component:()=>import("../components/hy.vue"),children:[{path:'/hy/jd',component:()=>import("../components/hy/jd.vue"),},{路径:'/hy/sn',组件:()=>import("../components/hy/sn.vue"),},{路径:'/hy/hp',component:()=>import("../components/hy/hp"),},]},hy.vue:看效果：一个小知识点：子路由路径可以简写，代码如下：{path:'/hy',component:()=>import("../components/hy.vue"),children:[{path:'jd',component:()=>import("../components/hy/jd.vue"),},{path:'sn',component:()=>import("../components/hy/sn.vue"),},{path:'hp',component:()=>import("../components/hy/hp"),},]}，但缩写时有需要注意的地方。原则上我们只需要删除父路径中重复的部分，即写（这里有一个错误示例）：{path:'/hy',component:()=>import("../components/hy.vue"),children:[{path:'/jd',component:()=>import("../components/hy/jd.vue"),},]}，但是因为'/'代表根路径，会在根路径下搜索，而不是'/hy'的子层级3.重定向子路由配置完成后，将路由切换到父层级，此时会发现不会被渲染。因为此时的路径不在子路由上。重现：所以这时候我们需要添加一个默认的显示路径，首先插入一个新的子路由，设置路径为空，将加载的组件设置为你要显示的默认组件：{path:'/hy',组件:()=>import("../components/hy.vue"),children:[{路径:'',组件:()=>import("../components/hy/jd.vue"),},{path:'jd',component:()=>import("../components/hy/jd.vue"),},]}，效果如下：但是这种写法是莫名其妙，甚至有点好笑。为什么要配置这样的子路由？然后继续改造：{path:'/hy',component:()=>import("../components/hy.vue"),redirect:'/hy/jd',children:[//{//path:'',//component:()=>import("../components/hy/jd.vue"),//},{path:'jd',component:()=>import("../components/hy/jd.vue"),},]},redirect（重定向），将其值设置为带父路径的完整路径，即'/hy/jd'的形式，然后可以在地址栏看到路径的变化：4.总结命名路由与一些值很长路径的匹配，例如：这样的代码不仅难看，而且难维护，所以需要给这条路由起个名字，一个萝卜一个坑，简洁方便通过它们各自的名字嵌套路由在单页应用中几乎随处可见，所以嵌套路由也是开发必须的，不是仅有的既能读又能写清楚。重定向比较简单易懂。也可以写成对象或者函数的形式，不过我觉得直接写路径更清晰，就不过多介绍了。以后会有路由相关的知识。写这些文章，分享是一方面，学习也是另一方面。我也需要前车之鉴，在写文章的过程中发现自己的缺陷和问题。文中如有不对或不清楚的地方，希望指出。保持愚蠢，保持饥饿。