2-2 异步路由,get传值

一、异步路由

不会一次性将所有的路由模块加载，切换到对应的路由模块才进行加载

export default new Router({
    mode:"hash",
    routes:[
        ...
        {
            path:"/detail",
            name:"detail",
            /* 异步路由 */
            component:()=>import('@/pages/Detail')
        }
    ]
})

二、get传值

2-1 在列表页传值this.$router.push()

<div @click="handleClick(data.id)"></div>
export default {
    name:"Item",
    props:{
        data:{
            type:Object,
            required:true
        }
    },
    methods:{
        handleClick(id){
            console.log(id)
            this.$router.push(`/detail?id=${id}`)
        }
    }
};

2-2 在详情页接收值this.$route.query

export default {
    name:"Detail",
    computed:{
        id(){
            return this.$route.query.id
        }
    }
};

2-3 在详情页跳转回列表页

this.$router.back()