• 4
  • 新人请关照

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未被触发,新手求解惑,谢各位大神

阅读 1.9k
评论
    2 个回答

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

      • 4
      • 新人请关照

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

        撰写回答

        登录后参与交流、获取后续更新提醒

        相似问题
        推荐文章