beforeRouteUpdate没有触发

新手上路,请多包涵

在学习《vue技术栈开发实战》中beforeRouteUpdate没有触发

router.js代码

import Home from '@/views/Home.vue'

export default [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/argu/:name',
    component: () => import( '@/views/argu.vue'),
    props: true
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
  }
]

argu.vue代码

<template>
  <div>
    {{ name }}
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: 'apple'
    }
  },
  beforeRouteUpdate (to, from, next) {
    console.log(to.name,from.name)
    next()
  }
}
</script>

访问页面从http://10.0.0.150:8080/argu/apple跳转到http://10.0.0.150:8080/argu/banana,页面显示发生了变化,但是在console没有输出,beforeRouteUpdate未被触发,新手求解惑,谢各位大神

回复
阅读 5.1k
2 个回答

beforeRouteUpdate的触发是在动态路由情形下,比如 path: '/user/:userName' 这条路由,当页面不变更只动态的改变参数userName时,beforeRouteUpdate便会触发

新手上路,请多包涵

测试发现是因为router注册时,使用history模式,直接在浏览器跳转不会触发,使用js修改路由器则会触发;使用hash模式则都会触发,具体原因未明

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏