vue路由（路由基本使用，传参，多级路由）

I Am Rex

于 2024-04-30 21:06:50 发布

阅读量943

点赞数 24

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_49936845/article/details/138308764

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue-router简介

vue的一个插件库，专门用来实现SPA应用
在这里插入图片描述

路由配置和使用

vue2安装

npm i vue-router@3

vue3安装

npm i vue-router@4

在main.js引入（1，3句）
在这里插入图片描述
和vuex类似，在src创建router/index.js
再建立两个路由组件：

当然为了区分普通组件和路由组件，也可以把这两个路由组件放到pages文件夹下

src/router/index.js配置：

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
//放到pages需要更换路径为../pages/About

//创建并暴露一个路由器，`注意时routes不是routers`
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

App.vue中使用方式：
在这里插入图片描述

总览效果：
在这里插入图片描述

App.vue中应用：
1.路由标签
在这里插入图片描述
会自动转化为a标签，如果你不需要a标签（比如需要按钮等）后面会提到怎么使用

<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

2.展示
在这里插入图片描述

<router-view></router-view>

几个注意点：

嵌套（多级）路由

如下图，路由里面加路由
在这里插入图片描述
主要改变的地方在配置规则和使用时to需要加上父路径

router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
				}
			]
		}
	]
})