chaihongjun.me

Vue-router路由学习笔记路由的动态匹配

一般情况下,一条URL会对应一个页面,但是也有特殊情况,比如用户的详情页,因为用户的ID是不一样的,但是在实际项目中对于的页面结构是一样的,也就是同一个组件。用户详情页的地址可以是:

/user/detail?id=xxx  //xxx是用户的ID值

也可以是这样的:

/user/detail/:id   //:id是动态路径参数

获取上面参数的方法分别是this.$route.query.id 和 this.$route.params.id。

如果从id=1的用户切换到id=2的用户页面,虽然URL有变化,但是实际使用的组件并没变化,依然是detil.vue,如果想看看具体有什么变化,以及发生变化了想做一些响应,可以在组件内通过watch 监听当前路由信息的变化:

watch:{
    $route(to,from){
    // 可以对路由变化做响应
  }
}

通过this.property可以访问组件内data属性,,通过this.$route可以访问当前路由信息。对照watch的参数,

to相当于newVal,from相当于oldVal。to指向的是即将到达或者准备访问的路由对象,from表示前一个访问的路由对象。所以,如果想知道前面前一个页面的路径就可以 from.path 这样获取。

还有这样一个情况,访问的页面URL几乎完全一样,只有部分不同,比如 :/user-admin ,/user-guest,这样的路由可以通过

/user-* 这样的规则匹配。另外,如果想配置404页面,可以:

{
    path:'*'
}

但是一定要把这条规则放在最后,因为路由的匹配顺序是从第一条开始的。

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»