Vue-Router使用

一时失言乱红尘 2024-05-07 22:25 57阅读 0赞

## 1.安装 ##

npm install vue-router@4

![24f5b44adea243a3bc72fbba63de96c6.png][]

## 2. 添加路由 ##

新建*router文件夹，新建文件 index.ts*

import { createRouter, createWebHashHistory,createWebHistory} from "vue-router";
    
    const routes = [
        {
            path: '/login',
            component: () => import("../views/Login.vue")
        },
        {
            path: '/',
            component: () => import("../views/Index.vue")
        }
    ]
    
    const router = createRouter({
       // history: createWebHashHistory('/'),
        history: createWebHistory(),
        routes
    })
    
    export default router

![4a77955c3c694c8094bff41abc225b94.png][]

## 3. 在main.ts文件加入路由 ##

import { createApp } from 'vue'
    import App from './App.vue'
    
    //加入路由
    import router from './router/index';
    //并通过use，使用路由
    createApp(App).use(router).mount('#app')

## 4.在App.vue 添加导航，并使用router-view ##

## 5. 查看效果 ##

![a65a444cb6d147a6bcda272aa6128b80.png][]

## 6.扩展 ##

> createWebHistory路由模式路径不带\#号：  
> const router = createRouter(\{ history: createWebHistory(), routes\});

> createWebHashHistory路由模式路径带\#号：  
> const router = createRouter(\{ history: createWebHashHistory(), routes\});

## 7.路由**全局前置守卫** ##

router.beforeEach是一个全局前置守卫,用于在路由导航触发前进行一些权限校验或提示。

其定义式:

router.beforeEach((to, from, next) => {
      // ...
    })

TypeScript

**它接受三个参数:**

*  to:即将要进入的目标路由对象
 *  from:当前导航正要离开的路由
 *  next:调用该方法后才能进入下一个钩子。next() 直接进入下一个钩子,next(false) 中断当前的导航。next('/') 或者 next(\{ path: '/' \}) 则会进入一个不同的地址。例如,我们可以在全局前置守卫中实现登录校验:

router.beforeEach((to, from, next) => {
        const store = useStore1()
        if (to.path == "/login") {  // 判断该路由是否需要登录权限
            next()
        } else {
            if (store.name != "") {  // 判断用户是否已登录
                next()
              } else {
                next('/login')  // 未登录则跳转到登录页
              } 
        }
      })

[24f5b44adea243a3bc72fbba63de96c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/c2e9a2bc04df4c6da3d1a240a8f4f3e7.png
[4a77955c3c694c8094bff41abc225b94.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/a0c51e98ea924a1494d4c0cd3b720991.png
[a65a444cb6d147a6bcda272aa6128b80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/71db08ff8422413aa83257d68ed01c90.png