一般情况下,一条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:'*' }
但是一定要把这条规则放在最后,因为路由的匹配顺序是从第一条开始的。