vue3 使用 Vue Router实现前端路由控制
**在现代Web应用中，前端路由控制是非常重要的一部分。它可以帮助我们将不同的页面内容展示给用户，同时保持用户在浏览不同页面时的连贯性。本文将介绍如何使用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用于动态渲染与当前活跃路由匹配的组件
