router-view的问题

最新推荐文章于 2023-12-13 22:24:14 发布

終わり.

最新推荐文章于 2023-12-13 22:24:14 发布

阅读量230

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43949957/article/details/120345059

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

router-view的问题

嵌套路由的作用就是让新的页面内容展示在子组件的占位符中

// @/router/index.js
// 使用嵌套路由
// father component下配置children
{
    path: '/father',
    name: 'father',
    component: ()=>import(/* webpackChunkName:"father-son" */ '../components/father.vue'),
    children: [
      {
      //父路由下的路径，完整路径为../father/son1
        path:'son1', 
        name:'son1',
        component:()=>import(/* webpackChunkName:"father-son" */ '../components/son.vue')
      },
      {
        path:'son2',
        name:'son2',
        component:()=>import(/* webpackChunkName:"father-son" */ '../components/son.vue')
      }
    ]
  }

父组件中使用一个<router-view/>路由占位符

<!--father.vue-->
<!--father component-->
<template>
  <div id="father">
    <h3>{{fatherH3}}</h3>
    
    <!--son component-->
    <son></son>
    
    <!--使用一个router-view会渲染两个son router中的一个-->
    <router-link to="/father/son1">son1</router-link>
    <router-link to="/father/son2">son2</router-link>
    <router-view/>
  </div>
</template>

效果：只会渲染一个son component
使用一个路由占位符

父组件中使用两个<router-view/>

<!--father.vue-->
<template>
  <div id="father">
    <h3>{{fatherH3}}</h3>
    <son></son>
    <router-link to="/father/son1">son1</router-link>
    <router-view/>
    <router-link to="/father/son2">son2</router-link>
    <router-view/>
  </div>
</template>