(九)vue-route嵌套路由或者一级路由点击链接如何把链接对应的组件的内容加载到指定的<router-view/>进行渲染
实现效果:
比如在嵌套路由里面，组件里面有3个链接，渲染链接的有3个，每个的位置都不一样，点第一个链接加载第一个，点击第二个链接加载第二个
1：一级路由实现动态选择进行组件渲染
(1):比如在app.vue定义两个，给每个取一个名字
yyy
xxx
(2)router.js里面给对应的路由指定到对应的,以后加载信息就加载对他指定的呢个里面
下面的ccc,ddd就是对应选择上面的router-view的名称,之后点击下面的路由就会把内容加载到对应的名称下面的router-view
routes:[
{ path: '', redirect:"/home" },//配置重定向,页面路径不跟任何路径的时候就加载下面的/home路径下面对应的组件
{ path: '/home',components: {ccc:Home}},
{ path: '/NewsPath' ,name:"NewsPathRoute",components: {ddd: News},},
]
(3):在home.vue写对应的跳转,跳转到/NewsPath路径下面对应的组件
News
(4):最终达到的效果：
默认页面/home对应的组件的内容会加载到yyy的上面
点击home.vue里面的News链接的时候对应的组件会加载到xxx下面，
这就达到了一级路由链接选择指定的加载的效果
2：嵌套路由实现动态选择
进行组件渲染跟上面的一级路由的方式其实是一样的
下面的an，bc会找到对应的进行对应渲染
(1)router.js配置
routes:[
{ path: '/UserPath', name:'userrotesss',component: Users,//component: Users,
components: {
ddd: Users
},
children:[
//如果要使用这里的重定向,app.vue里面用户组件跳转不能用命名路由跳转
//还可以专门拿一个页面来做重定向页面
{path:'',redirect:"/UserPath/userlist"},
{path:'userlist',components:{an:userlist},name:"nana1"},
{path:'useradd',components:{bc:useradd},name:"nana2"},
]},
]
(2)app.vue做一个跳转链接
注意：如果要使用UserPath下面的重定向redirect:"/UserPath/userlist"这里不能使用命名路由，只能使用普通路由进行跳转
(3)user.vue页面进行对应的子组件的渲染，下面的an，bc的router-view的渲染就会渲染router.js里面对应的an，bc链接里面的组件内容，就达到点点映对应的链接跳转到指定的router-view的效果
(4)页面对应的一些css的配置