1.首先配置路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: require('../components/home.vue'),
children: [
{
path: 'user',
name: 'user',
component: require('../components/user/user.vue'),
},
]
},
{
path: '/login',
name: 'login',
component: require('../components/login/login.vue'),
}
]
})
2. 假设从login页面跳转到home页面,需要传递userName参数
那么login.ts中:
this.$router.push({
path:'/',
query: {
userName: this.loginForm.username
}
});
home.ts中接收参数:
this.userName = this.$route.query.userName
假设从home页面跳转到user子路由,需要传递UserRoleType 和 solutionID两个参数
home.ts中:
复制代码
this.$router.push({
path:'user',
query:{
userRoleType: this.userRoleType,
solutionID: this.selectedSolutionID
}
});
复制代码
user.ts中接收参数:
this.UserRoleType = Number(this.$route.query.userRoleType);
this.solutionID = Number(this.$route.query.solutionID);
注意:1. 不管传不传参数,步骤一中路由配置是不变的。2. 这样传递的参数会反映到url中,即url中会携带这些参数