我想在vue-router上一页的链接或网址。像这样。怎么做?
vue-router
const link = this.$router.getPrevLink(); // function is not exist? this.$router.push(link);
近概念是this.$router.go(-1)。
this.$router.go(-1)
this.$router.go(-1);
jutyujz01#
所有vue-router的navigation guards都接收前一个路由作为from参数。每个guard函数接收三个参数:
from
to: Route
from: Route
next: Function
例如,您可以使用beforeRouteEnter(一个组件内导航保护)来获取以前的路线并将其存储在数据中。
beforeRouteEnter
... data() { return { ... prevRoute: null } }, beforeRouteEnter(to, from, next) { next(vm => { vm.prevRoute = from }) }, ...
然后你可以使用this.prevRoute.path来获取之前的URL。
this.prevRoute.path
tnkciper2#
对于带有Vue Router 4的Vue 3,我的解决方案是:
this.$router.options.history.state.back
最终代码:
export default defineComponent({ name: 'Error404', data () { return { lastPath: null } }, created () { this.lastPath = this.$router.options.history.state.back }, computed: { prevRoutePatch () { return this.lastPath ? this.lastPath : '/dashboard' } } })
问候。
zazmityj3#
如果先前的url不存在,此路由解决方案将回退到静态url。
<template> <div> <router-link :to="prevRoutePath">Previous Page</router-link> <router-link to="/">Home Page</router-link> </div> </template> <script> export default { beforeRouteEnter(to, from, next) { next(vm => { vm.prevRoute = from; }); }, computed: { prevRoutePath() {return this.prevRoute ? this.prevRoute.path : '/'}, } } </script>
7vux5j2d4#
虽然this answer很棒,但 * 在popstate导航的情况下(也就是当用户单击后退按钮时),接收到的路由并不总是历史中以前的路由 *。所以如果你使用Vuex,这里有一个代码片段,它尊重这种行为:
const store = new Vuex.Store({ state: { routerHistory: [], }, }); const router = new VueRouter({ mode: 'history', scrollBehavior(to, from, savedPosition) { const fromHistory = Boolean(savedPosition); if (fromHistory && store.state.routerHistory.length > 0) { store.state.routerHistory.splice(-1, 1); } else { store.state.routerHistory.push(from); } return savedPosition || { x: 0, y: 0 }; }, });
一旦实现,你可以在你的商店中为前一个路由定义一个getter:
const store = new Vuex.Store({ // ... getters: { previousRoute: (state) => { const historyLen = state.routerHistory.length; if (historyLen == 0) return null; return state.routerHistory[historyLen - 1]; }, }, });
这段代码使用了scrollBehavior钩子,如果它是popstate导航,它只接收savedPosition参数。多亏了Vuex,我们可以将所有的路由存储在一个数组中(在多个页面上)。
pinkon5k5#
对于Vue 2.6,它适合我:In-App.vue组件当你初始化VueRouter时,你可以从和到细节如下:
export const globalState = Vue.observable({ from: {}, to: {} }); const router = new VueRouter({ base: '/', routes: routes, mode: 'history', scrollBehavior(to, from, savedPosition) { Vue.set(globalState, 'from', from); Vue.set(globalState, 'to', to); return { x: 0, y: 0 }; }, });
路由是你的路由,每次你导航到一个不同的URL,你将有所有的从和到路由的细节。然后你可以导入globalState对象并像这样使用它
globalState
import { globalState } from './app'; goBack() { const lastPath = globalState.from?.fullPath; const currentPath = globalState.to?.fullPath; if (lastPath && currentPath !== lastPath) { this.$router.push(lastPath); } else { this.$router.push('another-path'); } }
d4so4syb6#
<template> <div> <router-link :to="previousPage">Previous Page</router-link> <router-link to="/">Home Page</router-link> </div> </template> <script setup> import { useRouter } from 'vue-router'; import { computed } from 'vue'; const router = useRouter(); const previousPage = computed(() => { const lastPath = router.options.history.state.back; return lastPath ? lastPath : '/'; }); </script>
shyt4zoc7#
要将它从$router对象中拉出来,请在computed或方法中使用以下命令:
lastRouteName: function() { let returnVal = ''; const routerStack = this.$router.history.stack; const idx = this.$router.history.index; if (idx > 0) { returnVal = routerStack[idx - 1].name; } return returnVal; }
这将返回路由名称,但您也可以返回.path或任何其他属性。要检查历史对象,请执行console.log(this.$router.history);
.path
console.log(this.$router.history);
7条答案
按热度按时间jutyujz01#
所有vue-router的navigation guards都接收前一个路由作为
from
参数。每个guard函数接收三个参数:
to: Route
:要导航到的目标Route Object。*
from: Route
:当前离开的路径。next: Function
:必须调用此函数来解析钩子。操作取决于提供给next的参数例如,您可以使用
beforeRouteEnter
(一个组件内导航保护)来获取以前的路线并将其存储在数据中。然后你可以使用
this.prevRoute.path
来获取之前的URL。tnkciper2#
对于带有Vue Router 4的Vue 3,我的解决方案是:
最终代码:
问候。
zazmityj3#
如果先前的url不存在,此路由解决方案将回退到静态url。
7vux5j2d4#
虽然this answer很棒,但 * 在popstate导航的情况下(也就是当用户单击后退按钮时),接收到的路由并不总是历史中以前的路由 *。
所以如果你使用Vuex,这里有一个代码片段,它尊重这种行为:
一旦实现,你可以在你的商店中为前一个路由定义一个getter:
这段代码使用了scrollBehavior钩子,如果它是popstate导航,它只接收savedPosition参数。多亏了Vuex,我们可以将所有的路由存储在一个数组中(在多个页面上)。
pinkon5k5#
对于Vue 2.6,它适合我:
In-App.vue组件当你初始化VueRouter时,你可以从和到细节如下:
路由是你的路由,每次你导航到一个不同的URL,你将有所有的从和到路由的细节。然后你可以导入
globalState
对象并像这样使用它d4so4syb6#
shyt4zoc7#
要将它从$router对象中拉出来,请在computed或方法中使用以下命令:
这将返回路由名称,但您也可以返回
.path
或任何其他属性。要检查历史对象,请执行
console.log(this.$router.history);