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

目录
  • 使用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.js
import { 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')

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2022-04-16

vue-router 控制路由权限的实现

注意:vue-router是无法完全控制前端路由权限. 1.实现思路 使用vue-router实例函数addRoutes动态添加路由规则,不多废话直接上思维导图: 2.实现步骤 2.1.路由匹配判断 // src/router.js import Vue from 'vue'; import Store from '@/store'; import Router from 'vue-router'; import Cookie from 'js-cookie'; const routers =

vue3使用vue-router的完整步骤记录

前言 对于大多数单页应用程序而言,管理路由是一项必不可少的功能.随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的. Vue3中的许多更改都会稍微改变我们访问插件和库的方式,其中包括Vue Router. 一.第一步:安装vue-router npm install vue-router@4.0.0-beta.13 二.第二步:main.js 先来对比一下vue2和vue3中main.js的区别:(第一张为vue2,第二张为vue3) 可以

vue-router权限控制(简单方式)

在vue-router控制前端权限是常见需求: 有一种做法是直接在后端完成判断,提供页面列表和操作列表,在前端进行渲染,但这个方案并不优雅,前后端耦合度比较高. 比较常见的做法是把登录页面独立在router之外,专门写一个权限控制文件,在登录之后根据用户权限加载router,之后把权限作为参数传入各种组件中,以控制元素的渲染.这个方法比较合理,没有什么额外的开销,只是需要独立写一个登录页面和权限控制文件比较麻烦一些,特别是对一些小项目而言. 我们希望还有更简单的方式.这个时候梳理一下需求,我们的

vue中使用router全局守卫实现页面拦截的示例

一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论) 二.使用场景 静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的: 动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到router里面了.假如用户

Vue中this.$router.push参数获取方法

传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来指定页面. 及通过路由配置的name属性访问 在路由配置文件中定义参数: 通过name获取页面,传递params: 在目标页面通过this.$route.params获取参数: 2.Query 页面通过path和query传递参数,该实例中row为某行表格数据 在目标页面通过this.$route

vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看--clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli

vue中npm包全局安装和局部安装过程

全局安装是将npm包安装在你的node安装目录下的node_modules文件夹中.在windows和mac中,全局安装的默认路径是不同的.在mac中默认是安装到 /usr/locla/lib 中.在windows默认安装目录是 C:\Program Files\nodejs ,当然你也可以通过一下命令来查看全局安装路径. // 查看全局安装路径 npm root -g // 查看npm的基础设置 npm config ls // 查看安装目录路径 npm config get prefix 全

vue中axios解决跨域问题和拦截器的使用方法

vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

vue中axios的封装问题(简易版拦截,get,post)

第一步还是先下载axios npm install axios --save 第二步/src/utils/目录下建立一个htttp.js import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 拦截器 axios.interceptors.request.use( config => { // const token = getCookie('名称')

vue实现的封装全局filter并统一管理操作示例

本文实例讲述了vue实现的封装全局filter并统一管理操作.分享给大家供大家参考,具体如下: 在前后端分离的项目中,经常会有后台返回的数据需要进过处理才能显示到页面上的场景. 使用最多的场景就是日期和时间的处理,后台一般返回的都是时间戳,那么我们就要对时间戳进行处理. 下面就拿封装全局的处理日期和时间的 filter 来展示如何 vue 如何封装全局 filter 并统一处理. 在 src 目录下新建 filters 目录用来专门存放全局过滤器,如果项目的过滤器过多,那么就要按类型分类. 我司

AJAX显示加载中并弹出图层遮挡页面的实现示例

前言 相信每位开发者都应该有所了解,当用户发出AJAX请求时,如果长时间处于请求阶段,而没有给出用户回应,会给用户造成错觉,导致用户以为我们的系统"没反应"了.这从某方面来讲是一种不友好. 甚至有的时候,用户看不到想要的结果,就会不停的请求,这样会发生意想不到的后果. 所以,当发出AJAX请求时,我们给出一定的措施,保证系统的正确运行和良好的用户体验. 在这里,我使用的是:显示加载中图片,并弹出一个图层,使用户不能再次发出请求. 实现方法 HTML部分: <div id=&quo

vue中get请求如何传递数组参数的方法示例

前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让后端完美的接收数组 1.问题 示例代码 let params = { statusList: ['OVERDUE', 'DELAY'] } this.$http.get('/list', params) .then(res => {}) .catch(e => {}) 上述代码在不做配置的时候请求信息为:/list?stat

Vue中使用ElementUI使用第三方图标库iconfont的示例

1.在http://www.iconfont.cn/阿里巴巴图标库添加图标到自己项目中,然后点击更多项目中的编辑项目 2.修改前缀为el-icon-xxx,xxx自定义,然后将项目下载自本地 3.将这5个文件放入到项目文件中,将iconfont.css引入到Vue项目中, 然后修改iconfont.css的.iconfont处,将其修改为下图所示 4.修改iconfont.css后,大致如下图所示 5.最后就可以采用icon相同方式引入图标,如下图方式引用即可 注意:如果修改前缀为el-icon

vue cli3 调用百度翻译API翻译页面的实现示例

首先说下,本人为在校大三狗一只,缺少实战开发经验,然后用语什么的也不标准,就按我自己的想法写的,有什么不对的地方欢迎指导指导哈 然后直接开始吧 在需要翻译的地方做上标记,这里用的是添加名为"text-dom"的class的方法.比如: <div class="text-dom">原文:</div> 定义储存数据的data data() { return { before: { q: "", //输入的原文 to: &quo