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: [{...
·
路由配置
//路由配置 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'})
}
}
相当于get请求,页面跳转时参数会在地址栏中显示
//跳转页面
this.$router.push({
path:'/userManager',
query: {
id:this.id
}
})
//接收参数
this.$route.query.id
相当于post请求,页面跳转时参数不会在地址栏中显示
//跳转页面
this.$router.push({
path:'/userManager',
name:'userManager',
//params传参 需要使用 name 否则取不到;对应路由配置的 name
params: {
id:this.id
}
})
//接收参数
this.$route.params.id
配置路由 在path加 /:id
对应需要传的参数名
//路由配置
path: '/userManager/:id',
注意 :传参是
router
,接收参数是route
更多推荐
已为社区贡献5条内容
所有评论(0)