Vue路由的嵌套（chidren）

最新推荐文章于 2024-02-11 19:31:18 发布

〆﹏为你伏笔

最新推荐文章于 2024-02-11 19:31:18 发布

阅读量239

点赞数

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

本文链接：https://blog.csdn.net/Q2159621453/article/details/125314912

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1、index.js引入路由组件

import UserRoot from '../views/UserRoot.vue'


const routes = [
    {
        path: "/",
        name: "HomeView",
        // component: HomeView
        component: () => import('../views/HomeView.vue') //懒加载设置,需要这个组件时，才开始调用
    },
    {
        path: "/aboutview",  //父路由地址
        name: "AboutView",
        redirect: "/AboutView/AboutChild",//重定向
        // component: AboutView
        component: () => import('../views/AboutView.vue'),
        children: [   //添加两个子路由
            {
                path: 'AboutChild',
                name: 'AboutChild',
                component: AboutChild
            },
            {
                path: 'AboutChild1',
                name: "AboutChild1",
                component: AboutChild1
            }
        ]
    },
]

2、父路由渲染（例子上的AboutView）

<template>
  <div>
    <!-- <StudentName /> -->
    <router-link to="/AboutView/AboutChild">AboutChild</router-link> | //路径需要写全
    <router-link to="/AboutView/AboutChild1">AboutChild1</router-link>
    <router-view></router-view>
  </div>
</template>