Vue vue-router嵌套路由的用法记录一下

最新推荐文章于 2022-03-25 19:07:11 发布

原创最新推荐文章于 2022-03-25 19:07:11 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Vue-router #嵌套路由

本文详细介绍了在Vue中如何使用router-link和router-view进行页面跳转和渲染，通过实例展示了嵌套路由的配置方法，对比了嵌套与非嵌套路由的不同效果。

1.首先需要明白router-link 和router-view的作用，
router-link顾名思义，放路径的地方供跳转。router-view可以理解为跳转渲染的地方
可能理解的比较粗浅。
2.怎么用呢，这里准备了三个页面 halo1，halo2，halo3，
理一下思路，halo2嵌套在halo1里面，halo3单独跳转然后对比下效果。
3.halo1

<template>
  <div>
    <router-link :to="{path:'/halo2'}">Hello My girlfriend</router-link>—————
    <router-link :to="{path:'/halo3'}">halo3</router-link>
    <router-view></router-view>    <!--跳转渲染的地方  -->
  </div>
</template>
<script>
export default {
  name: "halo1",
  data() {
    return {};
  }
};
</script>
<style scoped>
div {
  color: #22d7bb;
  padding: 20px;
  font-size: 30px;
}
a {
  color: #333;
}
</style>

4.halo2

<template>
<div>
    <div>No, wake up. You didn't.</div>
    </div>
</template>
<script>
export default {
    name:'halo2',
    data(){
        return{

        }
    }
}
</script>
<style scoped>
div{
    color: #22d7bb;
    font-size: 30px;
}
</style>

5.halo3

<template>
<div>
    <div>这是没有放在嵌套路由里的halo3</div>
    </div>
</template>
<script>
export default {
    name:'halo3',
    data(){
        return{

        }
    }
}
</script>
<style scoped>
div{
    color: #22d7bb;
    font-size: 30px;
     padding: 20px;
}
</style>

6.接着配置路由，找到router文件夹下的index.js文件，就是放路由的地方

import halo1 from '@/components/shou/quanxian/halo1'    //这里的引入路径位置记得修改。根据文件的位置来
import halo2 from '@/components/shou/quanxian/halo2'
import halo3 from '@/components/shou/quanxian/halo3'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/halo1',
      component:halo1,
      children:[   //children就是配置嵌套路由的地方，无论children里面有多少个halo2，他都会默认渲染在halo1里的router-view里面
         {
          path: '/halo2',
          component:halo2
         },
        ] 
     },
     {
      path:'/halo3',      //这里跟halo1同级，对比一下有嵌套和没有嵌套的效果。
      component:halo3,
      },
    ]
  })

7.搞定，看一下效果。
在这里插入图片描述
8.halo2渲染的位置始终在halo1页面下，而halo3则直接跳转走了。
最后，个人理解，不足望指。