Nuxt2 控制路由导航方式

本文主要是介绍Nuxt2 控制路由导航方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

控制路由导航

1 在插件中使用 beforeEach 守卫

首先，创建一个插件文件，例如 router.js：

export default ({ app, store }) => {app.router.beforeEach((to, from, next) => {if (to?.fullPath === '/buy/' && from?.fullPath === '/pdfBuy/') {return // 取消导航} else {next()  // 可以导航}})
}

在 nuxt.config.js 中注册插件：

接下来，在 nuxt.config.js 文件中注册插件：

// nuxt.config.js
export default {plugins: ['~/plugins/router.js']
};

这样，当用户试图从 /pdfBuy/ 导航到 /buy/ 路由时，导航将被取消，并且保持在当前页面。

2 使用中间件取消导航

创建中间件文件：
创建一个中间件文件，例如 middleware/restricted.js：

export default function ({ route, from, redirect }) {if (route?.path === '/buy/' && from && from?.path === '/pdfBuy') {return redirect('/pdfBuy')}
}

在 nuxt.config.js 中注册中间件：

	router: {middleware: 'checkBuyAccess' // 指定要应用的中间件}

将在每次路由更改时自动运行

nuxt 中间件路由官网介绍：
https://nuxt.com.cn/docs/getting-started/routing

这篇关于Nuxt2 控制路由导航方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---