关于vue的＜router-view＞

最新推荐文章于 2025-06-19 23:49:39 发布

原创最新推荐文章于 2025-06-19 23:49:39 发布 · 640 阅读

3 ·

CC 4.0 BY-SA版权

本文探讨Vue中<router-view>组件的使用方式及路由配置对父页面与子页面显示的影响。阐述了在不同路由配置下，如何通过<router-view>实现子页面的正确加载和显示，以及<router-link>的跳转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于它跳转的基准不太清除，网上也没有很好的解释。

根据实验暂得出：如果当前父页面的.vue的路径和子页面的.vue路径已经写在路由里了，那么

1.路由里未redirect。页面显示父页面，不显示子页面。但如果父页面后续有路由跳转，就会在<router-view>里显示子页面。（可把<router-view>看作<div>）

2.路由里已经redirect到子页面了。页面显示父页面，<router-view>里显示子页面。父页面后续有路由跳转，会在<router-view>里显示子页面。

如果父页面未写在路由里（如App.vue）那使用<router-view>就会跳转到你设置的默认路由，即设置了path: '/',的路径。

代码实例如下。

在solve.vue里使用<router-view>

<template>
    <div>
        <div>
             <router-link to="/solve/contain1">a</router-link>路由跳转
        </div>父页面
        <router-view></router-view>子页面
    </div>
</template>

情况1 router.js

{
  path: '/solve',父页面
  component: Solve,
  name:'solve',
  children: [{
    path: '/solve/contain1',子页面
    component: Solvecon1,
    name:'contain1',
  }
运行后<div>里显示父页面，<router-view>里不显示子页面，但<router-link to>跳转的界面会显示在<router-view>里

情况2 router.js

{
  path: '/solve',
  component: Solve,
  name:'solve',
  redirect: '/solve/contain1'
  children: [{
    path: '/solve/contain1',
    component: Solvecon1,
    name:'contain1',
  }

运行后<div>里显示父页面，<router-view>里显示子页面，<router-link to>跳转的界面会显示在<router-view>里

这样，通过<router-view>就可以实现类似a标签的target效果。