Vue3使用Vue Router实现前端路由控制
作者：前进的胖子
在现代Web应用中,前端路由控制是非常重要的一部分,它可以帮助我们将不同的页面内容展示给用户,同时保持用户在浏览不同页面时的连贯性,本文将介绍如何使用Vue Router来实现前端路由控制,需要的朋友可以参考下
Vue3 使用 Vue Router实现前端路由控制
首先，我们需要安装Vue Router。在项目根目录下运行以下命令：
npm install vue-router@next
安装完成后，我们可以开始编写代码了。首先，我们需要导入createRouter和createWebHistory函数，以及我们自定义的视图组件。
import HomeView from '../views/HomeView.vue' import AdminView from '@/views/AdminView.vue' import AboutView from '../views/AboutView.vue' import ChildenList from '@/views/childenList.vue'
接下来，我们需要创建一个路由实例，并配置我们的路由规则。在这个例子中，我们有三个主页面：首页（HomeView）、关于页面（AboutView）和管理员页面（AdminView）。我们还定义了一个子路由（ChildenList），用于显示关于页面下的子页面。
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
children: [
{
path: 'ChildenList',
name: 'ChildenList',
component: ChildenList,
meta: { requiresAuth: true, role: 'admin' }
}],
// component:AboutView,
},
{
path: '/admin',
name: 'admin',
component:AdminView,
meta: { requiresAuth: true, role: 'admin' }
}
]
为了实现权限控制，我们需要在路由守卫中添加一些逻辑。在每个路由规则中，我们可以添加一个meta属性来指定该路由是否需要认证以及对应的角色。在这个例子中，我们为/about和/admin路由设置了requiresAuth和role属性
router.beforeEach((to, from, next) => {
const user = "name" // 假设这是从localStorage获取用户信息的函数
if (to.matched.some(record => record.meta.requiresAuth)) {
// 这个路由需要权限
if (!user || (to.meta.role && user !== to.meta.role)) {
// 用户未登录或者角色不匹配
next({ path: '/about'}) // 重定向到登录页面
} else {
// 用户已登录且角色匹配
next()
}
} else {
// 这个路由不需要权限
next()
}
})
最后将router导出
export default router
在main.js/main.ts引入
最后挂载routerView用于动态渲染与当前活跃路由匹配的组件
到此这篇关于Vue3使用Vue Router实现前端路由控制的文章就介绍到这了,更多相关Vue3 Vue Router路由控制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！