vue.js - 防止 vue-router 打开相同的路径

Question

您能给我一些关于我的解决方案的反馈吗？

我想阻止 vue router 打开用户已经看到的网站。

问题是:用户打开了一个具有双 ID 作为参数的网站，如下所示: path: '/detail/:idType/:itemId 最后一次单击同一选项卡后id /:itemId 已在网址中删除，用户会看到不同的 View ，这是我想要阻止的。

我当前的解决方案是添加 navigation guard :

// router.js
router.beforeEach((to, from, next) => {
    if (to.name === from.name) return
    else next()
})

如果名称匹配，可以返回吗？ 我使用了正确的路由器方法吗？

谢谢!

---

编辑 Praveen

// router.js
const router = new VueRouter({
    routes: [
        {
            path: '/new',
            name: 'New',
            component: () => import('../layout/New'),
            props: {
                mode: 'create'
            }
        },
        {
            path: '/edit/:uuid',
            name: 'Edit',
            component: () => import('../layout/New'),
            props: {
                mode: 'edit'
            }
        },
        {
            path: '/detail/:idType/:itemId/:uuidId?',
            name: 'Detail',
            component: () => import('../layout/Detail'),
            props: true,
        }
    ],
    mode: 'hash',
    linkActiveClass: 'active'
})

// tab navigation
<b-link
  :to="{ name: ['Edit', 'Detail'].indexOf($route.name) !== -1 ? $route.name : 'New'}"
  class="btn btn-site-nav"
  type="button" 
  v-text="'Booking'" 
/>

Answer 1

要中止导航，请调用 next(false) (在您的情况下:if (to.name === from.name) next(false))

要允许它传递(到其目标)，请使用 undefined 调用 next:next() (或 next(未定义) - 如果你想编写更明确的代码)

要重定向它，请使用包含 name 或 path 的对象调用 next (即: next({ name: '登录' }))