×

vue3应用:vue-router及路由权限拦截方式

作者:Terry2022.06.24来源:Web前端之家浏览:8492评论:0
关键词:vuejs

vue3应用:vue-router及路由权限拦截方式。

vue3 使用 vue-router 的方式和 vue2 基本一样,只不过初始化路由时需要用到一些函数来定义而已,另外 vue-cli 工具本身在创建 vue3 项目时就可以根据提示来进行安装配置 vue-router , 所以本篇只是针对那些忘记安装的小伙伴。

安装

  1. npm install vue-router@4

接着我们在根目录 src 下创建 router 目录并定义 index.js

src/router/index.js 的代码 

  1. // 1. 引入这两个函数来初始化路由
  2. import { createRouter, createWebHashHistory } from "vue-router"
  3. // 2. 配置路由
  4. const routes = [
  5.   {
  6.     path: '/info',
  7.     name: 'info',
  8.     component: () => import('@/pages/info'),
  9.     // 路由元信息,随你怎么定义,笔者一般采用这种方式来定义路由权限然后结合路由拦截,
  10.     // 下面的 auth:true 表示需要授权登录才可以进入此页面。
  11.     meta: {       
  12.       auth: true,
  13.     },
  14.   },
  15.   {
  16.     path: '/login',
  17.     name: 'login',
  18.     component: () => import('@/pages/login'),
  19.     meta: {
  20.       auth: false,
  21.     },
  22.   }
  23. ]
  24. // 3. 创建路由实例
  25. const router = createRouter({
  26.   history: createWebHashHistory(), // 表示使用 hash 模式,即 url 会有 # 前缀
  27.   routes
  28. })
  29. // 4. 你还可以监听路由拦截,比如权限验证。
  30. router.beforeEach((to, from, next) => {
  31.   // 1. 每个条件执行后都要跟上 next() 或 使用路由跳转 api 否则页面就会停留一动不动
  32.   // 2. 要合理的搭配条件语句,避免出现路由死循环。
  33.   const token = cookies.get('token')
  34.   if (to.meta.auth) {
  35.    if (!token) {
  36.    return router.replace({
  37.       name: 'login'
  38.     })
  39.    }
  40.    next()
  41.   } else {
  42.     next()
  43.   }
  44. })
  45. export default router

接下来在项目的入口文件 main.js 里面引入 router/index.js

  1. // main.js
  2. import { createApp } from 'vue'
  3. import router from '@/router/index.js' // 引入
  4. import App from '@/App.vue'
  5. const app = createApp(App)
  6. app
  7. .use(router)
  8. .mount('#app')
  9. export default app

至此就完成啦 

vue3使用vue-router讲解

  1. cnpm i vue-router@next -D

创建Router对象和路由配置——routerIndex.js

  1. import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"
  2. // 1. 定义路由组件, 注意,这里一定要使用 文件的全名(包含文件后缀名)
  3. import countIndex from "../pages/count/countIndex.vue";
  4. import langshanIndex from "../pages/langshan/langshanIndex.vue";
  5. // 2. 定义路由配置
  6. const routes = [
  7.   { 
  8.     path: "/",
  9.     redirect: '/countIndex'
  10.   },
  11.   { path: "/countIndex", component: countIndex },
  12.   { path: "/langshanIndex", component: langshanIndex },
  13.  
  14. ];
  15. // 3. 创建路由实例
  16. const router = createRouter({
  17.   // 4. 采用hash 模式
  18.   history: createWebHashHistory(),
  19.   // 采用 history 模式
  20.   // history: createWebHistory(),
  21.   routes, //使用上方定义的路由配置
  22. });
  23. export default router 
  24. //导出router

Router 当做插件引用进来——main.js

  1. import { createApp } from 'vue'
  2. import routerIndex from './router/routerIndex'  // 引入路由对象实例
  3. import App from './App.vue'
  4. const app = createApp(App)
  5. // 使用配置的路由
  6. app.use(routerIndex)
  7. app.mount('#app')

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuejs20220624a1.html

网友评论文明上网理性发言 已有0人参与

发表评论: