vue & vue router & dynamic router

vue & vue router & dynamic router

https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

740516-20190531101721932-2121254053.png

old

https://router.vuejs.org/api/#the-route-object


const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

new

https://router.vuejs.org/guide/advanced/navigation-guards.html


const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

history-mode

404

asterisk (*):


{
  // will match everything
  path: '*'
}
{
  // will match anything starting with `/user-`
  path: '/user-*'
}

* & pathMatch


// Given a route { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'

// Given a route { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route

https://router.vuejs.org/guide/essentials/history-mode.html

740516-20190531102930190-1130571673.png

https://github.com/pillarjs/path-to-regexp#parameters


/user/:id !== /user:id

typo bug

740516-20190531104221363-169486883.png

740516-20190531104314768-1199906960.png


转载于:https://www.cnblogs.com/xgqfrms/p/10953770.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值