Vue页面跳转方式及传参总结
路由配置
//路由配置 routerindex.js页面
import Vue from 'vue'
import Router from 'vue-router'
import UserManager from '@/components/UserManager'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/userManager',
name: 'userManager',
component: UserManager
}
]
})
1.标签跳转
<router-link to="/userManager"> <router-link/>
跳转时传参
//路由配置
path: '/userManager/:id',
//跳转页面 this.id 需要传的参数
<router-link :to="'/userManager/' + this.id"> <router-link/>
//接收参数
this.$route.params.id
2.事件跳转
methods: {
goUserManager() {
this.$router.push({ path:'/userManager'})
}
}
query传参
相当于get请求,页面跳转时参数会在地址栏中显示
//跳转页面
this.$router.push({
path:'/userManager',
query: {
id:this.id
}
})
//接收参数
this.$route.query.id
params传参
相当于post请求,页面跳转时参数不会在地址栏中显示
//跳转页面
this.$router.push({
path:'/userManager',
name:'userManager',
//params传参 需要使用 name 否则取不到;对应路由配置的 name
params: {
id:this.id
}
})
//接收参数
this.$route.params.id
使用params传参时 刷新页面参数消失
配置路由 在path加 /:id
对应需要传的参数名
//路由配置
path: '/userManager/:id',
注意 :传参是 router,接收参数是 route