vue项目中使用vue-router进行路由配置及嵌套多级路由

简介: 该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。

在vue项目中,很多时候我们需要二级路由或者三级路由来跳转页面,但大部分需求下我们都只用到了二级路由,有小伙伴就会发现,用到三级路由的时候,就会突然不知所措,是有新的方法呢,还是跟二级路由配置的时候是一样的呢,下面将展开详细的介绍。

           ----------------------------先进行效果演示----------------------------

c2f41e9da2f869325a8ee7b7aac47973.gif

1、用vue create ***** 命令创建一个vue项目,创建后目录结构如下所示。

在这里插入图片描述
2、对入口文件App.vue进行修改

<template>
  <keep-alive>
      <router-view/>
  </keep-alive>
</template>

3、在views下新建三个文件夹,命名为Home,User,News,在三个文件夹下分别新建一个index.vue文件,目录如下。
在这里插入图片描述

4、在三个vue文件下撰写相关代码

Home/index.vue

<template>
    <div class="container">
        <div class="home">
            <h2>一级路由区--主页</h2>
            <router-link to="/home/user" tag="button">点击进入用户管理</router-link>
        </div>

        <keep-alive>
            <router-view />
        </keep-alive>
    </div>
</template>

<script>
    export default {
   
        name: "Home",
    };
</script>

<style scoped>
    .container{
   
        height: 100vh;
        display: flex;
        margin:10px 100px;
    }

    .home button{
   
        height: 50px;
        background-color: #999999;
        outline: none;
        border: none;
        color: #fff;
        padding: 0 10px;
        border-radius: 20px;

    }
</style>

User/index.vue

<template>
    <div class = "container">
        <div class="user">
            <h2>二级路由区--用户管理</h2>
            <router-link to="/home/user/news" tag="button">点击进入新闻中心</router-link>
        </div>
        <keep-alive>
            <router-view />
        </keep-alive>
    </div>
</template>

<script>
export default {
   
  name: "User",
};
</script>

<style scoped>
    .container{
   
        height: 100vh;
        display: flex;
        margin:10px 100px;
    }

    .user button{
   
        height: 50px;
        background-color: #999999;
        outline: none;
        border: none;
        color: #fff;
        padding: 0 10px;
        border-radius: 20px;

    }
</style>

News/index.vue

<template>
  <div class="container">
      <div class="news">
          <h2>三级路由区——新闻中心</h2>
      </div>

      <keep-alive>
          <router-view />
      </keep-alive>
  </div>
</template>

<script>
export default {
   
  name: "News",
};
</script>

<style scoped>
    .container{
   
        height: 100vh;
        display: flex;
        margin:10px 100px;
    }

    .news button{
   
        height: 50px;
        background-color: #999999;
        outline: none;
        border: none;
        color: #fff;
        padding: 0 10px;
        border-radius: 20px;

    }
</style>

5、在router下新建一个文件,命名为home,在home下新建一个index.js文件,目录如下。

在这里插入图片描述

6、打开router文件夹下的index.js文件,将刚刚第三步新建的home引入。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import homeRouter from './home'

Vue.use(VueRouter)

const routes = [
    homeRouter,
    {
   
        path: '/',
        name: 'Home',
        component: Home
    },
    {
   
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue')
    }
]

const router = new VueRouter({
   
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

7、之后对router下的home文件进行配置,home/index.js代码如下。

export default{
   
    path:'/home',
    // 在vue中@表示src目录
    component:() => import('@/views/Home/index.vue'),

    // 二级路由
    children:[
        {
   
            path:'user',
            name:'user',
            component: () => import('@/views/User/index.vue'),

            // 继续嵌套,三级路由
            children:[
                {
   
                    path:'news',
                    name:'newsone',
                    component: () => import('@/views/News/index.vue')
                }
            ]
        },
        {
   
            path:'news',
            name:'newstwo',
            component: () => import('@/views/News/index.vue')
        }
    ]
}

8、最后在在浏览器中输入/home,/home/user,/home/news,/home/user/news进行测试。

测试完成之后就看到文章开头的具体效果啦!

相关文章
|
6天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
73 2
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
522 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
528 77
|
2月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
97 0
|
2月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
226 1
|
5月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
3月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
360 17
|
3月前
|
JavaScript 前端开发 UED
Vue 手风琴实现的三种常用方式及长尾关键词解析
手风琴效果是Vue开发中常见的交互组件,可节省页面空间、提升用户体验。本文介绍三种实现方式:1) 原生Vue结合数据绑定与CSS动画;2) 使用Element UI等组件库快速构建;3) 自定义指令操作DOM实现独特效果。每种方式适用于不同场景,可根据项目需求选择。示例包括产品特性页、后台菜单及FAQ展示,灵活满足多样需求。附代码示例与资源链接,助你高效实现手风琴功能。
161 10