第3讲：vue路由安装配置，带参路由，子路由配置及应用

CSDN专家-赖老师（软件之家）

已于 2023-09-23 11:51:05 修改

阅读量338

点赞数

分类专栏： Vue+ElementUI学习笔记文章标签： vue.js javascript 前端 elementui js-router

于 2023-09-23 11:49:06 首次发布

本文链接：https://blog.csdn.net/software7503/article/details/133196559

版权

本文介绍了Vue.js的路由管理库vue-router的安装和基本使用，包括在main.js中引入路由信息，App.vue的修改，以及使用router-link创建路由连接。详细讲解了带参路由的两种配置方式，动态路由参数的传递，并展示了如何配置子路由及实际应用。此外，还探讨了嵌套路由在选项卡场景中的应用和实现。

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

路由的安装与基本使用

vue-router是Vue官方的路由插件，它和Vue是深度集成，适用于构建单页面应用

vue-router的安装

//vue2路由配置

npm install vue-router@3.0.2 或 cnpm install vue-router@3.0.2

在具体应用的开发中我们一般会在src目录下新建一个名为router的目录，并在router目录下新建一个index.js用来存放路由信息

在src目录下新建一个名为router的目录，并在router目录下新建一个名为index.js的文件用于存放前端路由信息，在index.js文件内键入以下代码以开始使用vue-router

import Vue from 'vue'
import VueRouter from 'vue-router’
Vue.use(VueRouter)
export default new VueRouter ({
	// 路由信息
})

路由定义

在 router/index.js 下开始定义我们需要的路由

在 src 目录下新建一个名为 views 的空目录，该目录为所有页面的视图模板

在 views 目录下新建一个名为 login 的目录并在该目录下新建一个名为 index.vue 的组件。

在 views/login/index.vue 中键入以下代码：

在 login 目录并在该目录下新建一个名为 succ.vue 的组件。

在 views/login/succ.vue 中键入以下代码：

最低0.47元/天解锁文章