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

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

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

主页面关键代码

/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激活时的样式

Vue Router 是一个官方提供的 Vue.js 的路由管理器,可以用于构建单页面应用程序。嵌套路由是指在一个路由的组件中使用另一个路由。 在 Vue Router 中,可以通过在路由配置文件中定义嵌套路由嵌套路由的配置是以树形结构来组织的,父级路由将会嵌套渲染其路由的组件。 下面是一个示例的路由配置文件,演示了如何使用嵌套路由: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: Home, children: [ { path: '', component: Dashboard }, { path: 'about', component: About }, { path: 'products', component: Products, children: [ { path: '', component: ProductList }, { path: ':id', component: ProductDetail } ] } ] } ] const router = new VueRouter({ routes }) export default router ``` 在上面的代码中,父级路由 '/' 下包含了三个路由:Dashboard、About 和 Products。而 Products 路由又包含了两个路由:ProductList 和 ProductDetail。 在组件中使用嵌套路由时,需要在父级组件中使用 `<router-view>` 标签来渲染路由的内容。 ```html <template> <div> <h1>Home</h1> <router-view></router-view> </div> </template> ``` 在父级组件的模板中,通过使用 `<router-view>` 标签,路由的内容将会被渲染在这个位置。 这就是 Vue Router嵌套路由的基本使用方法。通过嵌套路由,可以更好地组织和管理应用程序的路由结构,实现更复杂的页面布局和导航功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值