Dieser Artikel stellt hauptsächlich die SPA-Implementierungsschritte der Vue-Routing-Verschachtelung im Detail vor. Interessierte Freunde können darauf verweisen.
In diesem Artikel erfahren Sie, wie Sie das Routing verschachtelter SPA implementieren:
A-Komponente (/a) muss B-Komponente (/b) und C-Komponente (/c) verschachteln
①Bereiten Sie die Verschachtelung der übergeordneten Komponente anderer Komponenten vor, um einen Container anzugeben
Geben Sie einen Container in der A-Komponente an
②Geben Sie das Kinderattribut im Routing-Konfigurationsobjekt der A-Komponente
{
Pfad:'/a',
Komponente an : A,
Kinder:[
{Pfad:'/b',Komponente:B},
{Pfad:'/c',Komponente:C},
]
}
Ergänzung:
//Wenn die Anzahl die aufgezeichnete Anzahl überschreitet, funktioniert es nicht.
this.$router.go(num);
Wenn num eine positive Zahl ist, gehen Sie vorwärts
Wenn num eine negative Zahl ist, gehen Sie rückwärts
Code
<!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>
<p id="container">
<p>{{msg}}</p>
<router-view></router-view>
</p>
<script>
//登录组件
var myLogin = Vue.component("login",{
template:`
<p>
<h1>登录组件</h1>
<router-link to="/mail">登录</router-link>
</p>
`
})
// 邮箱页面
var myMail = Vue.component("mail",{
// 定义一个返回的方法
methods:{
goBack:function(){
this.$router.go(-1);
}
},
template:`
<p>
<h1>邮箱主页面</h1>
<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>
</p>
`
// 指定一个容器,加载收件箱或收件箱的列表
})
// 收件箱组件
var myInBox = Vue.component("inbox-component",{
template:`
<p>
<h4>收件箱</h4>
<ul>
<li>未读邮件1</li>
<li>未读邮件2</li>
<li>未读邮件3</li>
</ul>
</p>
`
})
// 发件箱组件
var myOutBox = Vue.component("outbox-component",{
template:`
<p>
<h4>发件箱</h4>
<ul>
<li>已发送邮件1</li>
<li>已发送邮件2</li>
<li>已发送邮件3</li>
</ul>
</p>
`
})
//配置路由词典
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>Verwandte Empfehlungen:
Detailliertes Beispiel für die SPA-Einzelseitenanwendung in Vue
Ein Beispiel-Tutorial, das Vue-Routing-Jump-Probleme zusammenfasst
Detaillierte Beispiele für Vue-Routing-Hooks und Anwendungsszenarien
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierungsschritte für verschachtelte Vue-Routing-SPAs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
