如何在 router.back() 上为 VueJS 中的深层链接项目设置默认值答案

【问题标题】：How can I set a default value on router.back() for deep linked items in VueJS如何在 router.back() 上为 VueJS 中的深层链接项目设置默认值
【发布时间】：2020-07-10 09:58:55
【问题描述】：

我有两个（或更多）VueJS 路由，其中包含指向同一第三条路由的路由链接。

/页面/列表

<router-link :to="{name:'add-page'}">Add</router-link>

/pages/其他列表

<router-link :to="{name:'add-page'}">Add</router-link>

如果我在第三页上放了一个带有$router.back() 的放置链接，该链接将带我回到历史上我来自的前一页。

但是，如果直接在我的浏览器中输入add-page 路由，则没有历史记录。我想为该页面设置一个默认值，最好不要依赖全局默认值。

如果特定组件上没有历史记录，那么选择默认路由的最佳方式是什么？

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

Navigation Guard 是否符合您的需求？

你会像这样使用它：

router.beforeEach((to, from, next) => {

    if (to.name === 'add-page' && to.) {

         //Your logic here
         //eg a redirect
         next({ name: 'MyBaseRoute' }) 

     } else {
        next()
     }    
})

或者，如果您只需要选定的组件，您可以使用 in-component guard：

  beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },

【讨论】：