實現效果:
多個<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>