vue3的路由配置

import {createRouter, createWebHashHistory} from "vue-router";
 
// 1. 配置路由
let routes = [
    { path: '/', redirect: '/login' },
    {
        path: '/login', component: () => import('../views/login.vue')
    },
    {
        path: '/index', component: () => import('../views/index.vue'),
        children: [
            {
                path: '/user',
                name: "user",
                components:{ user: () => import('../views/system/user.vue')}
            },
            {
                path: '/role',
                name: "role",
                components:{ role: () => import('../views/system/role.vue')}
            },
            {
                path: '/menu',
                name: "menu",
                components: { menu: () => import('../views/system/menu.vue')}
            }
        ],
    },
 
];
// 2.返回一个 router 实列,为函数,配置 history 模式
const router = createRouter({
    history: createWebHashHistory(),
    routes,
});
 
// 3.导出路由   去 main.ts 注册 router.ts
 
export default router

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 3的路由配置和访问权限配置如下: 1 路由配置: 在Vue 3中,可以使用Vue Router进行路由配置。首先,需要安装Vue Router依赖: ``` npm install vue-router@next ``` 然后,在项目的入口文件中创建路由实例,并将其挂载到Vue应用中: ```javascript import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import App from './App.vue' const router = createRouter({ history: createWebHistory(), routes: [ // 路由配置项 ] }) const app = createApp(App) app.use(router) app.mount('#app') ``` 在`routes`数组中,可以配置多个路由项,每个路由项包含路径、组件等信息。例如: ```javascript const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] ``` 这样就完成了基本的路由配置。 2. 访问权限配置: 在Vue Router中,可以通过导航守卫来实现访问权限的配置。导航守卫是一组回调函数,可以在路由导航过程中进行拦截和控制。 - 全局前置守卫:使用`router.beforeEach`方法来注册全局前置守卫,该守卫会在每次路由切换前被调用。 ```javascript router.beforeEach((to, from, next) => { // 在这里进行权限判断和控制 next() }) ``` - 路由独享守卫:在路由配置项中,可以使用`beforeEnter`属性来注册路由独享守卫,该守卫只会在当前路由被激活时被调用。 ```javascript const routes = [ { path: '/admin', name: 'Admin', component: Admin, beforeEnter: (to, from, next) => { // 在这里进行权限判断和控制 next() } } ] ``` - 组件内的守卫:在组件内部,可以使用`beforeRouteEnter`、`beforeRouteUpdate`和`beforeRouteLeave`等生命周期钩子函数来注册组件内的守卫。 ```javascript export default { beforeRouteEnter(to, from, next) { // 在这里进行权限判断和控制 next() }, beforeRouteUpdate(to, from, next) { // 在这里进行权限判断和控制 next() }, beforeRouteLeave(to, from, next) { // 在这里进行权限判断和控制 next() } } ``` 以上就是Vue 3的路由配置和访问权限配置的基本介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Y2000104

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值