文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3怎么使用vue-router及路由权限拦截

2023-06-30 04:13

关注

这篇文章主要讲解了“vue3怎么使用vue-router及路由权限拦截”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3怎么使用vue-router及路由权限拦截”吧!

使用vue-router及路由权限拦截

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

第一步肯定是要先安装啦:npm install vue-router@4

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

下面是 src/router/index.js 的代码 

// 1. 引入这两个函数来初始化路由import { createRouter, createWebHashHistory } from "vue-router"// 2. 配置路由const routes = [  {    path: '/info',    name: 'info',    component: () => import('@/pages/info'),    // 路由元信息,随你怎么定义,笔者一般采用这种方式来定义路由权限然后结合路由拦截,    // 下面的 auth:true 表示需要授权登录才可以进入此页面。    meta: {             auth: true,    },  },  {    path: '/login',    name: 'login',    component: () => import('@/pages/login'),    meta: {      auth: false,    },  }]// 3. 创建路由实例const router = createRouter({  history: createWebHashHistory(), // 表示使用 hash 模式,即 url 会有 # 前缀  routes})// 4. 你还可以监听路由拦截,比如权限验证。router.beforeEach((to, from, next) => {  // 1. 每个条件执行后都要跟上 next() 或 使用路由跳转 api 否则页面就会停留一动不动  // 2. 要合理的搭配条件语句,避免出现路由死循环。  const token = cookies.get('token')  if (to.meta.auth) {  if (!token) {  return router.replace({      name: 'login'    })  }  next()  } else {    next()  }})export default router

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

// main.jsimport { createApp } from 'vue'import router from '@/router/index.js' // 引入import App from '@/App.vue'const app = createApp(App)app.use(router).mount('#app')export default app

至此就完成啦 

vue3使用vue-router讲解

cnpm i vue-router@next -D

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

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"// 1. 定义路由组件, 注意,这里一定要使用 文件的全名(包含文件后缀名)import countIndex from "../pages/count/countIndex.vue";import langshanIndex from "../pages/langshan/langshanIndex.vue";// 2. 定义路由配置const routes = [  {     path: "/",    redirect: '/countIndex'  },  { path: "/countIndex", component: countIndex },  { path: "/langshanIndex", component: langshanIndex }, ];// 3. 创建路由实例const router = createRouter({  // 4. 采用hash 模式  history: createWebHashHistory(),  // 采用 history 模式  // history: createWebHistory(),  routes, //使用上方定义的路由配置});export default router //导出router

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

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

感谢各位的阅读,以上就是“vue3怎么使用vue-router及路由权限拦截”的内容了,经过本文的学习后,相信大家对vue3怎么使用vue-router及路由权限拦截这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯