Vue中路由传参笔记

Vue中路由传参笔记

方案一：params

router中的index.js的路由配置：

const routes = [
	{
		path: '/Nav1',
		name: 'Nav1',
		component: Nav1,
		children:[
			{
				path:'Nav1Child2/:userid',//在路径的后面加  /:参数名  参数名自己起
				name: 'Nav1Child2',
				component:Nav1Child2
			},
		]
	}
]

传参方式：
1.通过路径的方式传参

<router-link to="/Nav1/Nav1Child2/1">Nav1子组件二</router-link>

2.通过push()方法传参
template中的代码

<button @click="buttonClick(1)">通过点击事件跳转路由传参</button>

script中的代码

methods:{
	buttonClick(userid){
		this.$router.push({
			path:`/Nav1/Nav1Child2/${userid}`
		})
		//当用下面的方法传参的时候 在路由配置中不需要加 /:userid
		//this.$router.push({
		//	name:'Nav1Child2',
		//	params:{
		//		userid:1
		//	}
		//})
	}
}

获取方式：通过$route.params方式获取

<div class="nav1Child2">
	<div>我是nav1Child2</div>
	<div>{{$route.params.userid}}</div>
	<!-- 切记这里是$route而不是$router -->
</div>

方案二:query

script中的代码

methods: {
	queryClick() {
		this.$router.push({
			path: '/Nav2/Nav2Child2',
			query: {
				id: 1
			}
		})
	}
}

获取方式：通过$route.query方式获取

<div>{{$route.query}}</div>

注意这里的获取方式是 $route 而不是 $router