码迷,mamicode.com
首页 > 其他好文 > 详细

四、Vue Router 设置动态路由

时间:2019-12-01 20:58:51      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:添加   常用   配置   相同   foo   内容   路径   date   match   

动态路由配置

/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>

高级路由配置

四、Vue Router 设置动态路由

标签:添加   常用   配置   相同   foo   内容   路径   date   match   

原文地址:https://www.cnblogs.com/yuxi2018/p/11967265.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!