vue中路由组件传参

path-query

参数拼接在地址栏上

html代码：
    <div id="app">
        <router-link to="user">user</router-link>
        <router-link to="manager">manager</router-link>
        <router-view></router-view>
    </div>

js代码：
    let user = {
            template:`
                 <div @click="userHandler">普通用户</div>
             `,
             data() {
                 return {
                     list:"hello",
                     obj:{
                         name:'tom',
                         age:3
                     }
                 }
             },
             methods: {
                 userHandler() {
                     // 跳转
                     this.$router.push({
                         path:'/manager',
                         query:{
                             list:this.list,
                             obj:JSON.stringify(this.obj)
                         }

                     })
                 }
             },
         }
         let manager = {
             template:`
                 <div>管理员 {{$route.query.list}}  {{$route.query.obj}}</div>
             `
         }
         let router = new VueRouter({
             routes:[{
                 path:'/user',
                 component:user
             },{
                 path:'/manager',
                 component:manager
             }]
         })
         new Vue ({
             el:"#app",
             router
         })

name-params

html代码：
 <div id="app">
        <router-link to="user">user</router-link>
        <router-link to="manager">manager</router-link>
        <router-view></router-view>
</div>

js代码：
  
let user = {
    template:`
        <div @click="userHandler">普通用户</div>
    `,
    data() {
        return {
            list:"hello",
            obj:{
                name:'tom',
                age:3
            }
        }
    },
    methods: {
        userHandler() {
            // 跳转
            this.$router.push({
                name:'m',
                params:{
                    list:this.list,
                    obj:JSON.stringify(this.obj)
                }
            })
        }
    },
}
let manager = {
    template:`
        <div>管理员 {{$route.params.list}}  {{$route.params.obj}}</div>
    `
}
let router = new VueRouter({
    routes:[{
        path:'/user',
        component:user,
        name:'u'
    },{
        path:'/manager',
        component:manager,
        name:'m'
    }]
})
new Vue ({
    el:"#app",
    router
})