Vue Router通过props传参

Vue Router通过props传参

在Vue项目中，通过路由转跳至其他页面时，可能会携带一些相对复杂的参数，显然使用动态路径参数（ /user/:username）或URL查询参数（/user?username=abc）都是不太方便的，因为这两种方式都只能传字符串。此时便可以启用路由props传参，也可达到解耦的目的。

启用props后，可以通过以下两种方式进行传参。

方式一

如果只是传递简单的参数，可用通过动态路径参数进行传参。下面例子为A页面转跳B页面：

路由配置

const router = new VueRouter({
    routes: [
        { 
            path: '/user/:id', 
            component: User, 
            props: true
       }
   ]})

A页面

this.$router.push('/usr/123') //注入路由器后才可以使用this.$router

B页面

const User = {
    props: ['id'],
    template: '<div>User {{ id }}</div>'}

方式二

如果只是传递复杂的参数，可用通过此方式进行传参。下面例子为A页面转跳B页面：

路由配置

const router = new VueRouter({
    routes: [
        { 
            path: '/user', 
            name: 'user'
            component: User, 
            props: true
       }
   ]})

A页面

this.$router.push({
    name: 'user',
    params: {
    	user: {
    		name: '小明',
        	age: 18,
        	gender: '男',
    	}
        ...
    }
})

B页面

const User = {
    props: ['user'],
    template: '<div>姓名： {{ user.name }}</div><div>年龄： {{ user.age }}</div><div>性别： {{ user.gender }}</div>'
}