vue-router嵌套路由(子路由)及router-link小记

芃鹏彭

于 2021-07-08 09:50:26 发布

阅读量1k

点赞数 3

文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/m0_55005710/article/details/118566665

版权

本文介绍了在Vue.js单页面应用中如何使用嵌套路由进行页面切换。通过示例展示了如何配置主页面模板及路由配置，包括`router-link`的使用和子路由的设置。当点击导航按钮时，内容区域会根据所选路由呈现不同的子页面。

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

嵌套路由尝尝用于单页面应用中，例如切换导航按钮下面页面切换。

主页面关键代码

/customerService

<template>
  <div>
    <div id="header">
      <ul>
        <router-link :to="{name: 'search'}" tag="li">查询</router-link>
      </ul>
    </div>
    <div id="content">
      <router-view></router-view>
    </div>
  </div>
</template>

路由配置

{
    path: '/customerService',
    component: (resolve) => require(['@/views/customerService/index.vue'], resolve),
    hidden: true,
    children: [
      {
        path: 'queryPolicy',
        component: (resolve) => require(['@/views/customerService/queryPolicy/index.vue'], resolve),
        name:'search'
      },
      {
        path: '',
        component: default,//为customerService子路由未匹配时显示的子页面compontent
        name:'default'
      }
    ]
  },

router-link指向子路由 :to"{name:'search'}" :to"{path:"/customerService/queryPolicy"}"
<router-link :to="'index'">Home</router-link>
注意这个组件的导出需要有类似下面的代码
export default {
name: 'App',
data(){
return {
index:'/'
}}}

tag=""默认为a，为router-link的标签类型

active-class 为该router-link激活时的样式