第一种
父组件:使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?
第一个页面要传参数的代码
//html代码内
<template>
<div id="LHC">
<a @click="turnrouter(1)" class="buttonText">路由传参id=1</a>
</div>
</template>
//方法内
methods: {
//路由跳转
turnrouter(ins) {
this.$router.push({
path: "/describe", //要跳转的页面路径
query: {
id: ins //传递的参数,方法要接收ins
}
});
},
}
router的index.js的路由配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
接收参数的页面
this.$route.query.id 页面内接收页面一传过来的参数id=1
第二种
父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
router的index.js的路由配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
methods方法内
//html代码内
<template>
<div id="LHC">
<a @click="turnrouter(1)" class="buttonText">路由传参id=1</a>
</div>
</template>
//方法内
methods: {
//路由跳转
turnrouter(ins) {
this.$router.push({
name: "Describe", //要跳转的页面路径
params: {
id: ins //传递的参数,方法要接收ins
}
});
},
}
接收参数的页面
this.$route.params.id 页面内接收页面一传过来的参数id=1
第三种
methods方法内
//html代码内
<template>
<div id="LHC">
<a @click="turnrouter(1)" class="buttonText">路由传参id=1</a>
</div>
</template>
//方法内
methods: {
//路由跳转
turnrouter(ins) {
this.$router.push({
path: `/describe/${id}`,
},
}
router的index.js的路由配置
很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
接收参数的页面
this.$route.params.id 页面内接收页面一传过来的参数id=1
第四种
路由直接跳转不传参
<router-link to="/index">跳转到首页</router-link>
router的index.js的路由配置
{
path: '/index',
name: 'Index',
component: Index
}
第五种
路由直接跳转不传参
//html代码内
<template>
<div id="LHC">
<a @click="turnrouter()" class="buttonText">路由传参id=1</a>
</div>
</template>
//方法内
methods: {
//路由跳转
turnrouter() {
this.$router.push(‘/index’)
//或
// 字符串
//this.$router.push('/index')
// 对象
//this.$router.push({ path: '/index' })
// 命名的路由
//this.$router.push({ name: 'Index', params: { userId: wise }})
},
}
router的index.js的路由配置
{
path: '/index',
name: 'Index',
component: Index
}