Vue Router 设置动态路由

Posted 2020-11-26 yuxi2018

动态路由配置

像/user/foo和/user/bar都映射到相同的路由。也就是说根据不同的ID，渲染相同的User组件。可以使用动态路径参数来达到这个效果。

动态路径参数使用冒号:标记，后面为参数的名称，参数会被设置到this.$route.params中。

<script>
    // 匹配模式 
    /user/:username
    // 匹配到的路径为
    /user/evan
    // $route.params 获取到的参数对象
    { useranme: 'evan' }    
</script>

注意：带:冒号的配置可以理解为正则匹配，因此你可以在最后设置一个?的惰性匹配，表示可以出现 0 次或 1次。

相应路由参数的变化

当使用路由参数时，如从/user/foo导航到/user/bar时，原来的组件实例会被复用。因为两个路由都渲染同一个组件，比起销毁再创建，复用则显得更加高效。这也意味着组件的生命周期钩子函数不会再被调用。

复用组件时，相对路由参数的变化作出相应的话，可以使用watch(监听)$route对象的变化。也可以使用beforeRouteUpdate路由更新的导航守卫。

<script>
    const User = {
        template: '...',
        // 1. 通过监听路由对象变化的形式
        watch: {
            '$route' (to, from) {
                // 对路由变化作出响应
            }
        }，
        // 2. 通过更新路由的钩子函数
        beforeRouteUpdate (to, from, next) {
            // 路由变化会触发...
        }
    }
</script>  

捕获所有路由或404 Not found 路由

匹配任意路径，可以使用通配符(*)；注意：使用通配符路由时，必须放在配置的最后。通常用于客户端404错误。

<script>
    { path: '*' } // 会匹配所有路径
    { path: '/user-*' } // 会匹配以 /user- 开头的任意路径
</script>

使用通配符时，$route.params内会自动添加一个名为pathMatch参数。注意：pathMatch获取的是*部分的内容

<script>
    // { path: '/user-*' }
    this.$router.push('/user-admin');
    this.$router.params  // 获取到的是 { pathMatch: 'admin' }
</script>

高级路由配置