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

问题描述

假设我有5条命名路线，即索引，新闻，Taggednews，NewsItem，TaggednewsItem

• 要在各种路由之间进行切换，我将其称为router.push，它可以正常工作
• 当我在NewsItem或TaggednewsItem处时，我想回到最后一个非项目网址，我该怎么做
• 以这样的示例历史记录堆栈为例 指数 新闻 新闻 标记新闻 TaggednewsItem TaggednewsItem
• 当我单击一个按钮时，我想从最后一个TaggednewsItem转到N个步骤，其中N将带我到最后一个命名的路线Taggednews或News或Index，以先到的为准
• 我该如何使用Vue路由器
• 它提供了go（N）选项，其中N是步骤数，问题是我需要找到N才能看到最后一个Index或News或Taggednews项目的位置

解决方法

我认为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);