实现效果:
多个<router-view/>的时候，点击不同的router-link,将内容加载到不同的<router-view/>里面进行渲染
注意:
渲染子路由内容的<router-view/>可以和跳转子路由的router-link的按钮可以不在一个页面上
用重定向跳转嵌套路由得时候，参数不但可以传到里面那层得<router-view/>里面显示得组件得内容里面，而且在放里面那个<router-view/>的那个页面也能获取到
实现代码:
1：一级路由实现动态选择<router-view/>进行组件渲染
(1):比如在app.vue定义两个<router-view/>，给每个<router-view/>取一个名字
<div>
<router-view name="ccc"></router-view>
yyy
</div>
<div>
xxx
<br><br><br>
<router-view name="ddd"></router-view>
</div>
</div>
(2)router.js里面给对应的路由指定到对应的</router-view>,以后加载信息就加载对他指定的呢个</router-view>里面
下面的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路径下面对应的组件
<div>
<br><br><br><br><br><br>
<router-link :to="`/NewsPath`" class="astyle" >News</router-link>
</div>
(4):最终达到的效果：
默认页面/home对应的组件的内容会加载到yyy的上面
点击home.vue里面的News链接的时候对应的组件会加载到xxx下面，
这就达到了一级路由链接选择指定的</router-view>加载的效果
2：嵌套路由实现动态选择<router-view/>进行组件渲染跟上面的一级路由的方式其实是一样的
下面的an，bc会找到对应的</router-view>进行对应渲染
(1)router.js配置
routes:[
{ path: '/UserPath', name:'userrotesss',component: Users,//component: Users,
components: {
ddd: Users
},
children:[
//如果要使用这里定义的重定向,app.vue里router-link路由跳转到user.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"这里不能使用命名路由，只能使用普通路由进行跳转
<ul class="ulstyle">
<li class="astyle1">
<router-link :to="`/UserPath`" class="astyle1">user</router-link>
</li>
</ul>
(3)user.vue页面进行对应的子组件的渲染，下面的an，bc的router-view的渲染就会渲染router.js里面对应的an，bc链接里面的组件内容，就达到点点映对应的链接跳转到指定的router-view的效果
<div class="content">
<div class="leftcs">
<ul class="ulcs">
<!--普通路由跳转-->
<!-- <li class="lics"><router-link :to="`/UserPath/userlist`">userlist</router-link></li>
<li class="lics"><router-link :to="`/UserPath/useradd`">useradd</router-link></li> -->
<!--命名路由跳转-->
<li class="lics"><router-link :to="{ name:'nana1' }">userlist</router-link></li>
<li class="lics"><router-link :to="{ name:'nana2' }">useradd</router-link></li>
</ul>
</div>
<div class="rightcs" >
111
<router-view name="an"></router-view>
</div>
<div class="rightcs">
222
<router-view name="bc"></router-view>
</div>
</div>
(4)页面对应的一些css的配置
<style>
.content{
/* 让里面DIV的元素横向排列 */
display: flex;
}
.leftcs{
width:200px;
min-height: 400px;
border-right: 1px solid #eee;
}
.rightcs{
/* 右边自适应 */
flex: 1;
}
.ulcs{
list-style: none;
}
.lics{
margin-bottom: 20px;
text-align: center;
padding-top: 20px;
}
</style>
<script>
export default {
name: 'UserFrom',
props: {
}
};
</script>