vue权限控制路由（动态添加路由）

最新推荐文章于 2024-03-09 10:31:17 发布
最新推荐文章于 2024-03-09 10:31:17 发布
阅读量1.8k 收藏 2
点赞数 1

这里写自定义目录标题


话不多说，直接上代码！！

router.js

import {router} from './index'
import login from '@/views/login/login'
import layout from '@/views/layout/layout'
import home from '@/views/home/home.vue'
import depDsStorageList from '@/views/home/homePage1/depDsStorageList.vue'
 
 
// 数据管理
import dataSourceAdmin from '@/views/dataManage/dataSourceAdmin/dataSourceAdmin'
import dataPoolAdmin from '@/views/dataManage/dataPoolAdmin/dataPoolAdmin'
import buildSqlTable from '@/views/dataManage/buildSqlTable/buildSqlTable'
import complianceDetectionFunction from '@/views/dataManage/complianceDetectionFunction/complianceDetectionFunction'
import tablePreview from '@/views/dataManage/dataSourceAdmin/tablePreview/tablePreview.vue'
import dataAssetsManage from '@/views/dataManage/dataAssetsManage/dataAssetsManage.vue'
//标准管理
import codeItemManage from '@/views/standardManage/codeItemManage/codeItemManage'
import metadataManage from '@/views/standardManage/metadataManage/metadataManage'
import standardFileManage from '@/views/standardManage/standardFileManage/standardFileManage'
import determinerManage from '@/views/standardManage/determinerManage/determinerManage'
//数据服务
import dataServiceAdmin from '@/views/dataService/dataServiceAdmin/dataServiceAdmin.vue'
import customizedServiceAdmin from '@/views/dataService/customizedServiceAdmin/customizedServiceAdmin.vue'
 
//系统管理
import labelManage from '@/views/systemManage/labelManage/labelManage.vue'
import roleMenu from '@/views/systemManage/role-menu/role-menu.vue'
import userAdmin from '@/views/systemManage/user-admin/user-admin.vue'
import roleAdmin from '@/views/systemManage/role-admin/role-admin.vue'
 
//权限
import haveNoAuthority from '@/views/systemManage/NoAuthority/haveNoAuthority'
import haveNotFound from '@/views/systemManage/NoAuthority/haveNotFound'
 
//初始化默认路由
export let initMenu = [
  {path: '', redirect: '/login'},
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path: '/haveNoAuthority',
    name: 'haveNoAuthority',
    component: haveNoAuthority
  },
  {
    path: '/haveNotFound',
    name: 'haveNotFound',
    component: haveNotFound
  },
  {
    path: '',
    redirect: '/depDsStorageList',
    component: layout,
    children: [
      {
        path: 'depDsStorageList',
        name: '首页内容列表',
        component: depDsStorageList,
      },
    ],
  },
  {
    path: '',
    redirect: 'addDataService',
    component: layout,
    children: [
      {
        path: 'addDataService',
        name: '新增数据服务',
        component: () => import('@/views/dataService/dataServiceAdmin/addDataService.vue'),
      },
    ],
  },
  {
    path: '',
    redirect: '/dataPoolAdmin',
    component: layout,
    children: [
      {
        path: 'dataPoolAdmin',
        name: '数据池管理',
        component: dataPoolAdmin
      },
    ],
  },
  {
    path: '',
    redirect: '/tablePreview',
    component: layout,
    children: [
      {
        path: 'tablePreview',
        name: '表关系预览',
        component: tablePreview
      },
    ],
  },
]
 
//动态配置路由
export let menu = {
  "首页": {
    path: '',
    redirect: '/home',
    component: layout,
    children: [
      {
        path: 'home',
        name: '首页',
        component: home,
      }
    ],
  },
  "标准数据服务": {
    path: '',
    redirect: '/dataServiceAdmin',
    component: layout,
    children: [
      {
        path: 'dataServiceAdmin',
        name: '标准数据服务',
        component: dataServiceAdmin,
      }
    ],
  },
  "定制数据服务":  {
    path: '',
    redirect: '/customizedServiceAdmin',
    component: layout,
    children: [
      {
        path: 'customizedServiceAdmin',
        name: '定制数据服务',
        component: customizedServiceAdmin,
      }
    ],
  },
  "数据源管理": {
    path: '',
    redirect: '/dataSourceAdmin',
    component: layout,
    children: [
      {
        path: 'dataSourceAdmin',
        name: '数据源管理',
        component: dataSourceAdmin,
      }
    ],
  },
  "数据资产管理": {
    path: '',
    redirect: '/dataAssetsManage',
    component: layout,
    children: [
      {
        path: 'dataAssetsManage',
        name: '数据资产管理',
        component: dataAssetsManage,
      }
    ],
  },
  "标签管理":  {
    path: '',
    redirect: '/labelManage',
    component: layout,
    children: [
      {
        path: 'labelManage',
        name: '标签管理',
        component: labelManage,
      },
    ],
  },
  "标准规范管理": {
    path: '',
    redirect: '/standardFileManage',
    component: layout,
    children: [
      {
        path: 'standardFileManage',
        name: '标准规范管理',
        component: standardFileManage
      },
    ],
  },
  "数据元管理": {
    path: '',
    redirect: '/metadataManage',
    component: layout,
    children: [
      {
        path: 'metadataManage',
        name: '数据元管理',
        component: metadataManage
      },
    ],
  },
  "限定词管理": {
    path: '',
    redirect: '/determinerManage',
    component: layout,
    children: [
      {
        path: 'determinerManage',
        name: '限定词管理',
        component: determinerManage
      },
    ],
  },
  "代码项管理": {
    path: '',
    redirect: '/codeItemManage',
    component: layout,
    children: [
      {
        path: 'codeItemManage',
        name: '代码项管理',
        component: codeItemManage
      },
    ],
  },
  "依标建库": {
    path: '',
    redirect: '/buildSqlTable',
    component: layout,
    children: [
      {
        path: 'buildSqlTable',
        name: '依标建库',
        component: buildSqlTable
      },
    ],
  },
  "合规检测": {
    path: '',
    redirect: '/complianceDetectionFunction',
    component: layout,
    children: [
      {
        path: 'complianceDetectionFunction',
        name: '合规检测',
        component: complianceDetectionFunction
      },
    ],
  },
  "用户管理":  {
    path: '',
    redirect: '/userAdmin',
    component: layout,
    children: [
      {
        path: 'userAdmin',
        name: '用户管理',
        component: userAdmin
      },
    ],
  },
  "权限管理": {
    path: '',
    redirect: '/roleAdmin',
    component: layout,
    children: [
      {
        path: 'roleAdmin',
        name: '权限管理',
        component: roleAdmin
      },
    ],
  },
  "角色资源管理": {
    path: '',
    redirect: '/roleMenu',
    component: layout,
    children: [
      {
        path: 'roleMenu',
        name: '角色资源管理',
        component: roleMenu
      }
    ],
  }
}
 
export let menuList = []
export const setMenuTree = function (menuTree) {
  let temp = new Vue({router})
  hanleFor(menuTree)
  temp.$router.addRoutes(menuList)
  temp.$router.addRoutes([{path: '*', redirect: '/' + menuList[0].redirect}])
}
 
const hanleFor = function (list){
  for (var i=0; i<list.length; i++) {
    if (list[i].children) {
      hanleFor(list[i].children)
    }else{
      menuList.push(menu[list[i].name])
    }
  }
}
export const routers = {
  router: initMenu
}
 

--------------------- 
作者：努力学习滴程序媛 
来源：CSDN 
原文：https://blog.csdn.net/qq_28529373/article/details/82685729 
版权声明：本文为博主原创文章，转载请附上博文链接！
 
 
// 数据管理
import dataSourceAdmin from '@/views/dataManage/dataSourceAdmin/dataSourceAdmin'
import dataPoolAdmin from '@/views/dataManage/dataPoolAdmin/dataPoolAdmin'
import buildSqlTable from '@/views/dataManage/buildSqlTable/buildSqlTable'
import complianceDetectionFunction from '@/views/dataManage/complianceDetectionFunction/complianceDetectionFunction'
import tablePreview from '@/views/dataManage/dataSourceAdmin/tablePreview/tablePreview.vue'
import dataAssetsManage from '@/views/dataManage/dataAssetsManage/dataAssetsManage.vue'
//标准管理
import codeItemManage from '@/views/standardManage/codeItemManage/codeItemManage'
import metadataManage from '@/views/standardManage/metadataManage/metadataManage'
import standardFileManage from '@/views/standardManage/standardFileManage/standardFileManage'
import determinerManage from '@/views/standardManage/determinerManage/determinerManage'
//数据服务
import dataServiceAdmin from '@/views/dataService/dataServiceAdmin/dataServiceAdmin.vue'
import customizedServiceAdmin from '@/views/dataService/customizedServiceAdmin/customizedServiceAdmin.vue'
 
//系统管理
import labelManage from '@/views/systemManage/labelManage/labelManage.vue'
import roleMenu from '@/views/systemManage/role-menu/role-menu.vue'
import userAdmin from '@/views/systemManage/user-admin/user-admin.vue'
import roleAdmin from '@/views/systemManage/role-admin/role-admin.vue'
 
//权限
import haveNoAuthority from '@/views/systemManage/NoAuthority/haveNoAuthority'
import haveNotFound from '@/views/systemManage/NoAuthority/haveNotFound'
 
//初始化默认路由
export let initMenu = [
  {path: '', redirect: '/login'},
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path: '/haveNoAuthority',
    name: 'haveNoAuthority',
    component: haveNoAuthority
  },
  {
    path: '/haveNotFound',
    name: 'haveNotFound',
    component: haveNotFound
  },
  {
    path: '',
    redirect: '/depDsStorageList',
    component: layout,
    children: [
      {
        path: 'depDsStorageList',
        name: '首页内容列表',
        component: depDsStorageList,
      },
    ],
  },
  {
    path: '',
    redirect: 'addDataService',
    component: layout,
    children: [
      {
        path: 'addDataService',
        name: '新增数据服务',
        component: () => import('@/views/dataService/dataServiceAdmin/addDataService.vue'),
      },
    ],
  },
  {
    path: '',
    redirect: '/dataPoolAdmin',
    component: layout,
    children: [
      {
        path: 'dataPoolAdmin',
        name: '数据池管理',
        component: dataPoolAdmin
      },
    ],
  },
  {
    path: '',
    redirect: '/tablePreview',
    component: layout,
    children: [
      {
        path: 'tablePreview',
        name: '表关系预览',
        component: tablePreview
      },
    ],
  },
]
 
//动态配置路由
export let menu = {
  "首页": {
    path: '',
    redirect: '/home',
    component: layout,
    children: [
      {
        path: 'home',
        name: '首页',
        component: home,
      }
    ],
  },
  "标准数据服务": {
    path: '',
    redirect: '/dataServiceAdmin',
    component: layout,
    children: [
      {
        path: 'dataServiceAdmin',
        name: '标准数据服务',
        component: dataServiceAdmin,
      }
    ],
  },
  "定制数据服务":  {
    path: '',
    redirect: '/customizedServiceAdmin',
    component: layout,
    children: [
      {
        path: 'customizedServiceAdmin',
        name: '定制数据服务',
        component: customizedServiceAdmin,
      }
    ],
  },
  "数据源管理": {
    path: '',
    redirect: '/dataSourceAdmin',
    component: layout,
    children: [
      {
        path: 'dataSourceAdmin',
        name: '数据源管理',
        component: dataSourceAdmin,
      }
    ],
  },
  "数据资产管理": {
    path: '',
    redirect: '/dataAssetsManage',
    component: layout,
    children: [
      {
        path: 'dataAssetsManage',
        name: '数据资产管理',
        component: dataAssetsManage,
      }
    ],
  },
  "标签管理":  {
    path: '',
    redirect: '/labelManage',
    component: layout,
    children: [
      {
        path: 'labelManage',
        name: '标签管理',
        component: labelManage,
      },
    ],
  },
  "标准规范管理": {
    path: '',
    redirect: '/standardFileManage',
    component: layout,
    children: [
      {
        path: 'standardFileManage',
        name: '标准规范管理',
        component: standardFileManage
      },
    ],
  },
  "数据元管理": {
    path: '',
    redirect: '/metadataManage',
    component: layout,
    children: [
      {
        path: 'metadataManage',
        name: '数据元管理',
        component: metadataManage
      },
    ],
  },
  "限定词管理": {
    path: '',
    redirect: '/determinerManage',
    component: layout,
    children: [
      {
        path: 'determinerManage',
        name: '限定词管理',
        component: determinerManage
      },
    ],
  },
  "代码项管理": {
    path: '',
    redirect: '/codeItemManage',
    component: layout,
    children: [
      {
        path: 'codeItemManage',
        name: '代码项管理',
        component: codeItemManage
      },
    ],
  },
  "依标建库": {
    path: '',
    redirect: '/buildSqlTable',
    component: layout,
    children: [
      {
        path: 'buildSqlTable',
        name: '依标建库',
        component: buildSqlTable
      },
    ],
  },
  "合规检测": {
    path: '',
    redirect: '/complianceDetectionFunction',
    component: layout,
    children: [
      {
        path: 'complianceDetectionFunction',
        name: '合规检测',
        component: complianceDetectionFunction
      },
    ],
  },
  "用户管理":  {
    path: '',
    redirect: '/userAdmin',
    component: layout,
    children: [
      {
        path: 'userAdmin',
        name: '用户管理',
        component: userAdmin
      },
    ],
  },
  "权限管理": {
    path: '',
    redirect: '/roleAdmin',
    component: layout,
    children: [
      {
        path: 'roleAdmin',
        name: '权限管理',
        component: roleAdmin
      },
    ],
  },
  "角色资源管理": {
    path: '',
    redirect: '/roleMenu',
    component: layout,
    children: [
      {
        path: 'roleMenu',
        name: '角色资源管理',
        component: roleMenu
      }
    ],
  }
}
 
export let menuList = []
export const setMenuTree = function (menuTree) {
  let temp = new Vue({router})
  hanleFor(menuTree)
  temp.$router.addRoutes(menuList)
  temp.$router.addRoutes([{path: '*', redirect: '/' + menuList[0].redirect}])
}
 
const hanleFor = function (list){
  for (var i=0; i<list.length; i++) {
    if (list[i].children) {
      hanleFor(list[i].children)
    }else{
      menuList.push(menu[list[i].name])
    }
  }
}
export const routers = {
  router: initMenu
}

index.js页面

import Vue from 'vue'
import iView from 'iview'
import lodash  from 'lodash'
import VueLodash  from 'vue-lodash'
import Router from 'vue-router'
 
import { routers, menuList, setMenuTree } from './routers';
import 'iview/dist/styles/iview.css'
 
 
Vue.use(Router);
 
Vue.use(iView);
 
Vue.use(VueLodash, lodash);
 
export const router =  new Router({
  routes: routers.router
})
 
export let getMenuFuc = function (list) {
  setMenuTree(list)
}
 
if (sessionStorage.getItem("role")) {
  getMenuFuc(JSON.parse(sessionStorage.getItem("menuTree")))
}
 
router.beforeEach((to, from, next) => {
  if (!sessionStorage.getItem("role") && to.name !== 'login') {
    next('/login')
  } else {
    next()
  }
})

login.vue 页面


<template>
  <div class="jq22-container loginBody" style="padding-top:100px; width: 100%; height: 100%;">
    <div class="login-wrap" @keydown.enter="handleSubmit">
      <div class="login-html">
        <p class="title">江苏消防数据资源管理服务平台</p>
        <div class="hr"></div>
        <div class="login-form">
          <div class="sign-in-htm">
            <Form ref="loginForm" :model="form" :rules="rules">
            <div class="group group1">
              <FormItem prop="account">
                <Icon :size="20" type="person" class="icon-user"></Icon>
                <input v-model="form.account" type="text" class="input" placeholder="用户名">
              </FormItem>
            </div>
            <div class="group">
              <FormItem prop="password" v-show="hidePass">
                <Icon :size="16" type="locked" class="icon-pass"></Icon>
                <div @click="showPwd"><Icon :size="22" type="eye-disabled" class="eyeDisabled"></Icon></div>
                <input v-model="form.password" type="password" class="input" data-type="password" placeholder="密码">
              </FormItem>
              <FormItem prop="password" v-show="showPass">
                <Icon :size="16" type="locked" class="icon-pass"></Icon>
                <div @click="hidePwd"><Icon :size="22" type="eye" class="eyeDisabled"></Icon></div>
                <input v-model="form.password" type="text" class="input" data-type="text" placeholder="密码">
              </FormItem>
            </div>
            <div class="group">
              <!--<FormItem prop="code">-->
             <FormItem prop="code">
                <Icon :size="18" type="android-checkmark-circle" class="icon-pass"></Icon>
                <input v-model="form.code" type="text" class="input" data-type="text" placeholder="验证码" maxlength="4">
                <img id="imgObj" alt="验证码" :src="cfg.api.obtain" @click="changeImg"/>
              </FormItem>
            </div>
            <!--<div class="group">
              <input id="check" type="checkbox" class="check" checked>
              <label for="check"><span class="icon"></span> 记住密码</label>
              <a href="#forgot" style="float: right">忘记密码?</a>
            </div>-->
            <Alert type="error" v-show="error">
              <span style="color: red">{{errorMessage}}</span>
            </Alert>
            <div class="group">
              <input type="button" class="button" value="登录" @click="handleSubmit">
            </div>
            </Form>
          </div>
        </div>
        <div span="8" v-show="spinShow">
          <Spin fix>
            <Icon type="load-c" size=50 class="demo-spin-icon-load"></Icon>
            <div>登录中，请稍后...</div>
          </Spin>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  @import "./login.css";
</style>
<script src="./loginJs.js"></script>

login.js

export default {
  data () {
    return {
      form: {
        account: 'admin',
        password: '123456',
        code: ''
      },
      rules: {
        account: [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      },
      showPass: false,
      hidePass: true,
      error: false,
      errorMessage: '',
      token: '',
      imgUrl: '',
      validate: '',
      spinShow:false
    };
  },
  created (){
    let _this = this
    _this.token = this.getCookie('token')
    _this.changeImg()
    $(".demo-spin-col").height($("body").height())
  },
  methods: {
    showPwd () {
      this.hidePass = false
      this.showPass = true
    },
    hidePwd () {
      this.hidePass = true
      this.showPass = false
    },
    handleSubmit () {
      let _this = this
      _this.$refs.loginForm.validate((valid) => {
        if (valid) {
          _this.spinShow = true
          _this.$ajax.post(_this.cfg.api.login, _this.form).then(function(res){
            if(res.data.result){
               _this.setCookie('token',res.data.token, 365)
              let role = res.data.data.role
              var roleString = ''
              for (var i=0; i<role.length; i++) {
                if (i == role.length-1) {
                  roleString += role[i].roleName
                }else{
                  roleString += role[i].roleName + ','
                }
              }
              sessionStorage.setItem("account",_this.form.account)
              sessionStorage.setItem("role",roleString)
 
              let menuTree = res.data.data.menuTree
              sessionStorage.setItem("menuTree",JSON.stringify(menuTree))//用于layout页面加载菜单
 
              let buttonList = res.data.data.buttonList  //存储按钮的权限控制
              sessionStorage.setItem("buttonList",JSON.stringify(buttonList))
              getMenuFuc(menuTree)
              _this.$router.push('home');
 
              _this.error = false
            }else{
              _this.error = true
              _this.errorMessage = res.data.message
              _this.form.code = ''
              _this.changeImg()
            }
            _this.spinShow = false
          }).catch((error)=>{ _this.spinShow = false});
        }
      });
    },
    changeImg() {
      var imgSrc = $("#imgObj");
      var src = imgSrc.attr("src");
      imgSrc.attr("src", this.changeUrl(src));
    },
    changeUrl(url) {
      var timestamp = (new Date()).valueOf();
      var index = url.indexOf("?",url);
      if (index > 0) {
        url = url.substring(0, index);
      }
      if ((url.indexOf("&") >= 0)) {
        url = url + "×tamp=" + timestamp;
      } else {
        url = url + "?timestamp=" + timestamp;
      }
      return url;
    }
  }
}
Nancy_2017
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 动态添加路由及生成菜单的方法示例
12-12
写后台管理系统，估计有不少人遇过这样的需求：根据后台数据动态添加路由和菜单。 为什么这么做呢？因为不同的用户有不同的权限，能访问的页面是不一样的。 在网上找了好多资料，终于想到了解决办法。 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍： router.addRoutes router.addRoutes(routes: Array) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 举个例子： const router = new Router({ routes: [
vue自定义指令和动态路由实现权限控制
10-14
主要介绍了vue自定义指令和动态路由实现权限控制的方法，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
Vue3权限控制全攻略：路由与组件层面的用户角色与权限管理方法深度解析
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-09 3441
权限控制是一个很重要的概念，在 Web 应用程序中尤其重要。简单地说，权限控制就是将用户分为不同的分类，为每个分类分配相应的用户权限。这样，用户就只能访问他们所允许的内容了。权限控制可以提高应用程序的安全性和稳定性，使数据更加安全可靠。 在 Vue 中进行权限控制，通常有两种方式：第一种是在路由层面进行控制，第二种是在组件层面进行控制。
vue 动态路由权限管理（浓缩代码简单版）
PrimaryColor
10-15 2615
一、首先在main.js做路由守卫，不能先跳转路由页面，在页面中向后端获取路由配置文件。 *相关补充：权限管理一般放到项目的最后时间来做，最开始路由配置信息前端都是写死，做权限管理的时候，需要将路由配置发给后端，让后端判断该显示哪些菜单，再返回给前端，不能前端判断，考虑到后端接口返回的值是可以被拦截修改的。* main.js添加如下代码： import store from "./store"; /**动态路由 */ const whiteList = ['Login', 'Index'];//默认
Vue项目流程1，vue-cli脚手架初始化项目，项目的其他配置，路由组件的搭建，TheFooter组件显示与隐藏，路由传参相关面试题，重写push与replace方法，以及相关我遇到的问题及解决办法
qq_49080239的博客
08-14 348
node_modules文件夹：项目依赖文件夹。public文件夹：一般放置一些静态资源（图片），需要注意，放在public文件 夹中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹中。src文件夹（程序员源代码文件夹）：assets文件夹：一般也是放置的静态资源（一般放置多个组件共用的静态资源），需要注意，放置在assets文件夹里面的静态资源，在webpack打包的时候，webpack会把静态资源当作一个模块打包到JS文件里面。......
权限控制——动态路由
ATM100的博客
02-13 994
动态路由
Vue-3路由级权限控制
m0_53164768的博客
12-30 3922
Vue-3路由级权限控制。
vue3实现路由角色权限
lzc13902932164的博客
07-25 784
首先，需要在项目中使用 Vue Router 进行路由管理，在主文件（一般是 main.js）中引入和使用 Vue Router。上述代码中，Dashboard 路由需要 admin 和 user 角色才能访问，Settings 路由只需要 admin 角色才能访问。上述代码中，通过 getUserRole 方法获取当前用户的角色，然后判断该角色是否在路由配置的允许访问的角色列表中。在路由配置文件中，可以定义路由的 meta 字段来表示当前路由需要的权限信息。
vue3路由+权限
leveretz的博客
01-02 1654
vue3路由+权限
vue3通过路由控制来实现的权限管理
leveretz的博客
02-07 1359
vue3通过路由控制来实现的权限管理
vue实现权限控制路由(vue-router 动态添加路由)
10-16
今天小编就为大家分享一篇vue实现权限控制路由(vue-router 动态添加路由)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
第六单元 vue路由
2301_76357103的博客
06-14 148
同理，用户权限的认证也可以这么做。因为vue首次加载的时候把页面暂时不需要展示的组件也一次加载了，当打包构建应用时，Javascript 包会变得非常大，影响页面加载，如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。你经常会在手机上有这样的体验，比如你在商品列表页，找了半天找到一个商品，然后进入了商品详情页面，结果发现不是，当你在返回商品列表页面的时候，还是原来你滚动的位置，这样的业务场景其实就是用到了，keep-alive。
Vue-cli proxyTable 解决开发环境的跨域问题
hsany330的专栏
11-16 8961
和后端联调时总是会面对恼人的跨域问题，最近基于Vue开发项目时也遇到了这个问题，两边各自想了一堆办法，查了一堆资料，加了一堆参数，最后还得我把自己的localhost映射成上线时将要使用的域名。 今天翻看代码时，突然发现vue-cli的config文件里有一个参数叫proxyTable，看这个名字就感觉能解决问题，于是我就去搜了一下，果然。在vuejs-templates，也就是vue-cli的
vue权限控制和动态路由
良_123的专栏
03-03 3862
vue权限控制和动态路由
vue脚手架(vue-cli)，vue2，vue3，ref引用，路由和路由插件（vue-router），路由导航守卫，插槽
m0_66706006的博客
08-29 756
/全局过滤器-独立于每个vm实例之外//Vue.filter()方法接收两个参数，第1个参数是全局过滤器的“名字”，第2个参数是全局过滤器的“处理函数”})4. 连续调用多个过滤器过滤器可以串联地进行调用--把message的值，交给filterA进行处理-->--把filterA处理的结果，再交给filterB进行处理-->--最终把filterB处理的结果，作为最终的值渲染到页面上-->5. 过滤器传参过滤器的本质是JavaScript函数，因此可以接收参数。
（vuecli，选项式api，js语法）后台管理系统项目笔记
sj1877288470的博客
11-15 440
所有 需要上传文件的接口 在表单控件中新增一个 文件上传 控件， 点击文件上传时 立即上传 返回了地址，地址 合并 最终上传 表单字段中。前端在发请求时，需要将 后端登录返回的token 放到所有请求的请求头中（token access_token）（一般给后端用，前端直接发请求会涉及到跨域的问题，前端请求后端的接口，拿到数据再去请求地图服务端接口）vuex某个状态，拿到值之后不会改变（登录接口返回的数据），这种同步，只需要在 请求拿到数据后，
vue3权限的设置
1
04-25 1478
在 beforeEach 中，我们可以通过 to.meta.requiresAuth 判断该路由是否需要登录权限，如果需要登录权限且用户未登录，则跳转到登录页面进行登录，否则允许访问该路由。首先，对于路由的权限控制，我们可以在路由定义时，设置 meta 属性，用于存储该路由的权限信息。接下来，在路由跳转时，我们可以监听路由变化事件，通过判断该路由是否需要登录权限，来进行权限控制。在组件中，我们可以使用 $store.state.user 判断用户是否已登录，如果未登录，则跳转到登录页面进行登录。
vue3 + vite+element-Plus实现动态路由权限管理以及菜单渲染
Lsir1998的博客
07-02 893
vue3+vite使用element-Plus实现动态路由，后端请求接口获取路由数据，根据路由渲染菜单，实现权限控制
VUE前端动态路由权限控制
08-12
在Vue前端应用中，可以通过动态路由和权限控制来实现页面的权限管理。下面是一种常见的实现方式： 1. 定义路由：在Vue路由配置文件中，定义所有的路由信息，包括需要进行权限控制的路由和不需要进行权限控制的路由...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值