vue-router 基础知识

1. 动态路由匹配

1. 路径参数以 : 标记，参数值会被设置到this.$route.params。
2. 使用路由参数，例如：‘/user/foo’到‘/user/bar’，组件实例会被复用，需要watch监听$route对象。
3. to.name 匹配的是路由的name值。

watch: {
        '$route' (to, from) {
            if (to.name == 'detail') {
                this.params= this.$route.params
                this.getActivityDetail();
            }
        }
    }

2.编程式导航

字符串:router.push('home');
对象：router.push({path:'home'})
命名路由：router.push({name:'user',params:124})
带查询字符串：router.push({path:'login',query:{userId:1,userName:2}})
带params参数: let userId=123;  router.push({path:'/user/${userId}'})

3. 命名视图

1. 同路由，多视图，需要多个组件，使用components属性。
2. 使用name属性命名，没有默认为default。

<router-view name="a"></router-view>
 {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
 }

4. 重定向别名

• 重定向：当访问'/a'时候，url 被替换成 '/b'。

{ path: '/a', redirect: '/b' }

• 别名：/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a。