<vue 路由 5、动态路由-标签上传递参数>

一、效果

在about页面点击“我的”，路径里传入了参数zhangsan,在“我的”页面里接收传递过来的张三并展现出来。注：标签中传递参数写法

二、代码结构

注：主要是标红的几个文件

三、代码

index.js

//引入路由
import {
	createRouter,
	createWebHistory
} from 'vue-router'
import Home from '../views/Home.vue'

//定义路由
const routes = [{
		path: '/',
		name: 'Home',
		component: Home
	},
	{
		path: '/about',
		name: 'About',
		component: () => import('../views/About.vue'),
		children: [{
				path: '',
				component: () => import('../views/AboutNews.vue')
			},
			{
				path: 'news',
				component: () => import('../views/AboutNews.vue')
			},
			{
				path: 'sport',
				component: () => import('../views/AboutSport.vue')
			},
			{
				path: 'me/:userId',
				component: () => import('../views/AboutMe.vue')
			}
		]
	}
]

//创建路由
const router = createRouter({
	//createWebHashHistory hash模式路径前面会多一个#号
	history: createWebHistory(process.env.BASE_URL),
	routes
})

//返回了路由
export default router

App.vue

Home.vue

About.vue

AboutNews.vue

AboutSport.vue

AboutMe.vue

四、知识点

$route和$router是有区别的

1、$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

2、$route为当前router跳转对象里面可以获取name、path、query、params等