admin管理员组文章数量:1633933
引子
开发过前端单页面应用的小伙伴们,应该对前端路由都不陌生吧。
无论是用 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",
版权声明:本文标题:vue-router 4.0 动态路由会跳转到 404 页面的问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729175939a1188717.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论