<vue 路由 6、动态路由-方法传递参数>

一、query效果

点击query按钮

二、param效果

点击param按钮

注意点

1：重新刷新浏览器后，参数都不在了。

2：url中能看不到传递的参数

3、分别用{{$route. params.name}}和方法的方式获取传递过来的参数并展现。

三、代码结构

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

四、代码

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') 
	},
	{
		path: '/query',
		name: 'Query',
		component: () => import('../views/Query.vue') 
	},
	{
		path: '/params',
		name: 'Params',
		component: () => import('../views/Params.vue') 
	}
]

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

//返回了路由
export default router

App.vue

Home.vue

About.vue

Query.vue

Params.vue