admin管理员组

文章数量:1633769

引子

开发过前端单页面应用的小伙伴们，应该对前端路由都不陌生吧。

无论是用 vue 或者 react，都有官方提供的 router 方案。

但是有些场景下，处于安全性和友好性考虑，我们需要用到动态路由。

如果你不知道什么叫动态路由，可以想一想下面的场景。

比如现在我们的项目中有一些页面，只有 vip 用户能看到，普通用户不能看到，那么我们怎么做呢？

我们首先的做法肯定是，将该页面的入口隐藏掉。但是如果仅仅只是这样做，还不够，那只是假隐藏，因为用户仍然可以通过直接输入链接的方式来访问到该页面。

正确的做法应该是：首先隐藏掉入口；其次根据用户的权限，动态的生成对应的路由。

这篇文章主要是想分享下，最近使用 vue-router 4.0 版本过程中，由于用到了动态路由引起的一些问题，以及个人研究出来的解决方案。

为了清楚的描述我们的问题，现在假设我们有两个这样的页面：

那么我们就会对应着两个不同的路由：

[
	{
    path: '/home', name: 'home', component: Home },
	{
    path: '/vip', name: 'vip', component: Vip }
]

当然为了简化业务模型，这里，我们只用了两个路由。分别对应着两个页面，一个是所有用户都能看到的主页 home；一个是登录了的用户才能看到的 vip 页面。

当然在实际的业务逻辑中，肯定是需要登录、注册等页面，这里假设这些操作我们都能在 home 页面内完成。

如果不需要根据用户来区分的话，我们直接像下面这样生成对应的路由即可：

const router = createRouter({
   
	history: createWebHistory(import.meta.env.BASE_URL),
	scrollBehavior: () => ({
    y: 0 }),
	routes: [
		// 重定向到 /home 路径
		{
    path: '/', redirect: "/home", },
		{
    path: '/home', name: 'home', component: Home },
		{
    path: '/vip', name: 'vip', component: Vip },
		// 404 页面
		{
   
		    path: "/404",

本文标签： 路由跳转到页面动态router

版权声明：本文标题：vue-router 4.0 动态路由会跳转到 404 页面的问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729175939a1188717.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。