1.定义嵌套路由组件
在views中生成新路由
Group.vue
<template>
<div>
<ul>
<li v-for="(group, index) in groupArr" :key="index">{{group}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
groupArr: ['Blackpink', 'Redvelvet', 'Twice', 'Itzy']
}
},
}
</script>
<style lang="css" scoped>
</style>
Solo.vue
<template>
<div>
<ul>
<li v-for="solo in soloArr" :key="solo.id">
<!-- <a href="???">{{solo.name}}</a> -->
<router-link :to="`/home/solo/msgdetail/${solo.id}`">{{solo.name}}</router-link>
<button @click="pushShow(solo.id)">push查看</button>
<button @click="replaceShow(solo.id)">replace查看</button>
</li>
</ul>
<button @click="$router.back()">back</button>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
soloArr: []
}
},
mounted() {
//模拟ajax请求从后台获取数据
setTimeout(() => {
const soloArr = [
{
id: 1,
name: 'Taeyoon',
},
{
id: 3,
name: 'Somi',
},
{
id: 5,
name: 'Jennie',
},
{
id: 9,
name: 'hyuna',
},
]
this.soloArr = soloArr
},1000)
},
methods: {
pushShow (id) {
this.$router.push(`/home/solo/msgdetail/${id}`)
},
replaceShow (id) {
this.$router.replace(`/home/solo/msgdetail/${id}`)
}
},
}
</script>
<style lang="css" scoped>
</style>
在Solo.vue包含异步显示,放在mounted() { }中使用
setTimeout()的回调函数使用的是箭头函数
在数组中为每个元素设置了专属的id
2. 注册嵌套路由
index.js
import Group from '../views/Group'
import Solo from '../views/Solo'
children: [
{
path: '/home/group', // path最左侧的/永远代表根路由
component: Group
},
{
path: 'solo', // 简化写法
component: Solo,
children: [
{
path: '/home/solo/msgdetail/:id',
component: MsgDetail
}
]
3. 编写路由链接
Home.vue
<template>
<div>
<h2>home</h2>
<div>
<ul class="nav nav-tabs">
<li><router-link to="/home/group">Group</router-link></li>
<li><router-link to="/home/solo">Solo</router-link></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
</div>
</template>