4-7.vue-router的嵌套写法

实现方式

1.代码展示

配置页面

import { createRouter, createWebHistory } from 'vue-router'

const Home = () => import('../views/Home.vue')
const Home1 = () => import('../views/Home1.vue')
const Home2 = () => import('../views/Home2.vue')
const About = () => import('../views/About.vue')

const routes = [
  {
    path: '/Home',
    component: Home,
    children: [
      {
        path: 'Home1',
        component: Home1
      },
      {
        path: 'Home2',
        component: Home2
      }
    ]
  },
  {
    path: '/About/:userId',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Home页面

<template>
  <div class="">
   <p>这是home页面,获取query方式传递的name值：{{this.$route.query.name}}</p>
   <button @click='jumpHome1'>跳转1</button>
   <button @click='jumpHome2'>跳转2</button>
   <router-view/>
  </div>
</template>

<script>

export default {
  name: 'Home',
  methods: {
    jumpHome1() {
      this.$router.push({path: '/Home/Home1',query: {age:18}});
    },
    jumpHome2() {
      this.$router.push('/Home/Home2');
    }
  }
}
</script>

home1页面

<!--  -->
<template>
  <div class=''>
    这是home的子页面1,获取到age数据的方式为：{{this.$route.query.age}}
  </div>
</template>

<script>

  export default {
    name: 'Home1',
  }
</script>
<style>

</style>

Home2页面

<!--  -->
<template>
  <div class=''>
    这是home的子页面2
  </div>
</template>

<script>

  export default {
    name: 'Home2',
  }
</script>
<style>

</style>

2.注意

1. 所有的跳转路径都要加‘/’,不加会进行路径的堆叠，导致出错
2. 在children里面配置的path路径不要加’/’,不然导致出错
3. 获取数据的方式和前面的方式相同