如何返回到 Vue Router 中具有给定名称的最后命名路由

Question

假设我有 5 条命名路线，Index、News、TaggedNews、NewsItem、TaggedNewsItem

为了在不同的路由之间切换，我调用 router.push 并且它工作正常
当我在 NewsItem 或 TaggedNewsItem 时，我想返回到最后一个非项目 url，我该怎么做
以这样的历史堆栈为例指数消息消息标签新闻标签新闻项目标记新闻项目
当我单击一个按钮时，我想从最后一个 TaggedNewsItem 开始 N 步，其中 N 将带我到最后命名的路由 TaggedNews 或 News 或 Index，以先到者为准
如何使用 Vue Router 执行此操作
它给出选项 go(N)，其中 N 是步数，问题是我需要找到 N 以查看最后一个索引或新闻或标记新闻项目存在的位置

Answer 1

我不认为 vue 路由器保存历史堆栈。您需要自己保存。

您可以使用 vuex 来跟踪历史堆栈并计算最后的不同路由路径，并在您需要的任何地方使用它。

实现可能类似于：

history.js

const history = {
    namespaced: true,
    state: {
        stack: [],
    },
    mutations: {
        PUSH_STACK(state, routeName) => state.stack.push(routeName),
    },
    actions: {
        pushStack({ commit }, routeName) => commit('PUSH_STACK', routeName),
    },
    getters: {
        lastDiff(state) {
            const reversed = state.stack.slice().reverse();
            const diff = reversed.findIndex(route => route !== reversed[0]);
            return -1 * diff;
        }
    }
}
export default { history }

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import { history } from './history';

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        history
    }
})
export default { store }

将其包含在您的 main.js 文件中：

import Vue from 'vue';
import { store } from './store';

const app = new Vue({
    el: '#app',
    store
});

在您的路由器文件中，您可以添加一个 global after hook 以将路径名推送到商店，如下所示：

import { store } from './store';

const router = // router config

router.afterEach((to) => store.dispatch('history/pushStack', to.name));

在您的组件中，您可以像这样使用它：

const backN = this.$store.getters['history/lastDiff'];
this.$router.go(backN);

如何返回到 Vue Router 中具有给定名称的最后命名路由

How do I go back to the last named route with a given name in Vue Router

html5-history

vue.js

vue-router

vuejs2