6.28实习学习小记

 Vue3中的userRoute和userRouter

useRoute相当于Vue2的this.$route，而useRouter相当于this.$router

用法

1.通过userRouter来控制路由跳转

import { useRouter } from 'vue-router'
export default {
    setup() {
        const userRouter = useRouter()
        userRouter.push("/home")
    }
}

2.隐式传参跳转

import { useRouter } from 'vue-router'
export default {
    setup() {
        const userRouter = useRouter()
        userRouter.push({
            name: 'Home',
            params: {
                name: 'haha',
                age: 18
            }
        })
    }
}

 3.显式跳转

import { useRouter } from 'vue-router'
export default {
    setup() {
        const userRouter = useRouter()
        userRouter.push({
            path: '/',
            query: {
                name: 'haha',
                age: 18
            }
        })
    }
}

注意： 

1. params和name一起用，path和query一起用
2. 显式query会很明显的跟在新的url上，而隐式params不会
3. 隐式params在刷新后可能会消失，我们可以在它存在的时候存如缓存中，如localstorage
4. 隐式params比显式query相对而言更安全，不会将参数直接暴露给用户
5. 显示query在浏览器的url上，如果你直接通过字符串的方式去取，可能会涉及转码等问题，当然useRoute将这些都处理好了，所以还是推荐通过useRoute.query去取显式路由的参数