vue-router 路由简记

前言

     vue-router中路由一共分为两种

• 编程式的导航router.push
• 声明式的导航<router-link>

编程式导航

this.$router.push("home");
<!-- 命名路由这种方式传递的参数，如果在目标页面刷新是获取不到-->
this.$router.push({
    
     name: 'news', params: {
    
     userId: 123 }})
<!-- 获取参数 -->
this.$route.params.userId

<!-- 查询参数 -->
this.$router.push({
    
     path: '/news', query: {
    
     userId: 123 }});
this.$route.query.userId

注:命名路由搭配params，刷新页面参数会丢失

声明式导航

<router-link to="news">click to news page</router-link>

<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>