本文為大家分享了路由嵌套的SPA實現的步驟：
A（/a）組件需要嵌套B組件(/b)和C組件(/c)
①準備嵌套其它組價的父組件 指定一個容器
在A組件指定一個容器
<router-view></router-ivew>
②在A組件的路由配置對象中指定children屬性
{
path:'/a',
component:A,
children:[
{path:'/b',component:B},
{path:'/c',component:C},
]
}
補充：
//數字如果超出記錄的次數，是不行的。
this.$router.go(num);
如果num是正數，向前進
如果num是負數，向后退
代碼
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>路由嵌套</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<router-view></router-view>
</div>
<script>
//登錄組件
var myLogin = Vue.component("login",{
template:`
<div>
<h2>登錄組件</h2>
<router-link to="/mail">登錄</router-link>
</div>
`
})
// 郵箱頁面
var myMail = Vue.component("mail",{
// 定義一個返回的方法
methods:{
goBack:function(){
this.$router.go(-1);
}
},
template:`
<div>
<h2>郵箱主頁面</h2>
<ul>
<li>
<router-link to="/inbox">收件箱</router-link>
</li>
<li>
<router-link to="/outbox">發件箱</router-link>
</li>
</ul>
// 點擊按鈕返回前面的頁面
<button @click="goBack">返回</button>
<router-view></router-view>
</div>
`
// 指定一個容器,加載收件箱或收件箱的列表
})
// 收件箱組件
var myInBox = Vue.component("inbox-component",{
template:`
<div>
<h5>收件箱</h5>
<ul>
<li>未讀郵件1</li>
<li>未讀郵件2</li>
<li>未讀郵件3</li>
</ul>
</div>
`
})
// 發件箱組件
var myOutBox = Vue.component("outbox-component",{
template:`
<div>
<h5>發件箱</h5>
<ul>
<li>已發送郵件1</li>
<li>已發送郵件2</li>
<li>已發送郵件3</li>
</ul>
</div>
`
})
//配置路由詞典
new Vue({
router:new VueRouter({
routes:[
{path:'',redirect:'/login'},
{path:'/login',component:myLogin},
{path:'/mail',component:myMail,children:[
{path:'/inbox',component:myInBox},
{path:'/outbox',component:myOutBox}
]},
]
}),
el:"#container",
data:{
msg:"Hello VueJs"
}
})
//通過再次指定一個<router-view></router-view>和children:[]
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
