嵌套路由配置

最新推荐文章于 2023-01-13 14:25:56 发布

一个柠檬

最新推荐文章于 2023-01-13 14:25:56 发布

阅读量377

点赞数

CC 4.0 BY-SA版权

分类专栏： vue笔记前端

本文链接：https://blog.youkuaiyun.com/A13330069275/article/details/81011707

前端同时被 2 个专栏收录

106 篇文章

订阅专栏

vue笔记

38 篇文章

订阅专栏

本文介绍Vue.js中如何配置路由及实现基本的导航功能。通过定义路由规则，可以轻松实现页面间的跳转。文章详细展示了如何设置父级路由与子级路由，并通过<router-link>组件和<router-view>组件实现导航栏和内容区的动态加载。

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

1.配置路由

{
    path: '/user',
    component: User, 
    name: 'user',
    children:[
      { path: 'useradd', component: UserAdd },
      { path: 'userlist', component: UserList }
    ] 
  }

2.父路由里面配置子路由显示的地方 <router-view></router-view>

<div class="user">
            <div class="left">
                <ul>
                    <li>
                        <router-link to="/user/useradd">增加用户</router-link>
                    </li>
                    <li>
                        <router-link to="/user/userlist">用户列表</router-link>
                    </li>
                </ul>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </div>