vue路由学习-嵌套路由

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>

补充：注意设置数据的类型是一般数据、数组还是对象。也需要考虑数组里面的元素是否是对象