精华内容
下载资源
问答
  • Vue 动态添加路由实现

    2020-06-13 18:51:37
    项目需求:除固定的模块使用静态路由定义外,其他路由由后端定义配置后,以接口的形式返回给前端动态添加。这里使用 vue-router addRoutes 方法操作。 具体实现方式如下: // main.js import Vue from "vue"; ...

    项目需求:除固定的模块使用静态路由定义外,其他路由由后端定义配置后,以接口的形式返回给前端动态添加。这里使用 vue-router addRoutes 方法操作。

    具体实现方式如下:
    // main.js
    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    import Antd from "ant-design-vue";
    import "ant-design-vue/dist/antd.css";
    
    Vue.config.productionTip = false;
    
    Vue.use(Antd);
    
    // 路由监听
    router.beforeEach((to, from, next) => {
      // 统一处理动态路由
      const UpdateRoutes = () => {
        // 获取动态路由
        const routeArr = [
          {
            path: "/demo",
            name: "Demo",
            templatePath: "./views/Demo.vue",
            title: "Demo管理",
            children: [
              {
                path: "/list",
                name: "DemoList",
                templatePath: "./views/DemoList.vue",
                title: "Demo列表",
                children: [],
                meta: {}
              }
            ],
            meta: {}
          },
          {
            path: "/test",
            name: "Test",
            templatePath: "./views/Test.vue",
            title: "Test管理",
            children: [],
            meta: {}
          }
        ];
        sessionStorage.routeArr = JSON.stringify(routeArr);
        let data = JSON.parse(sessionStorage.routeArr);
    
        // 统一处理组件路由关联解析
        const templateAnalysis = data => {
          data.forEach(item => {
            item.component = () => import(`${item.templatePath}`);
            if (item.children.length > 0) {
              templateAnalysis(item.children);
            }
          });
        };
        templateAnalysis(data);
        // 本地存储
        store.commit("setRoutes", data);
        // 加载动态路由
        router.addRoutes(store.state.routes);
      };
    
      // 处理页面刷新与路由切换
      if (!from.name) {
        console.log("页面刷新");
        if (
          router.options.routes.filter(item => item.name === to.name).length !== 0
        ) {
          UpdateRoutes();
          console.log("静态路由");
        } else {
          if (!to.name) {
            UpdateRoutes();
            console.log("动态路由");
            router.push(to.path);
          }
        }
      } else {
        console.log("路由切换");
      }
      next();
    });
    
    router.afterEach(() => {});
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");
    
    // router.js
    import Vue from "vue";
    import VueRouter from "vue-router";
    
    Vue.use(VueRouter);
    
    const routes = [
      {
        path: "/",
        name: "Index",
        component: () =>
          import(/* webpackChunkName: "index" */ "../views/Index.vue")
      },
      {
        path: "/home",
        name: "Home",
        component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue")
      },
      {
        path: "/about",
        name: "About",
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/About.vue")
      },
      {
        path: "/list",
        name: "List",
        component: () => import(/* webpackChunkName: "list" */ "../views/List.vue")
      }
    ];
    
    const router = new VueRouter({
      routes
    });
    
    export default router;
    
    // store.js
    import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      state: {
        routes: [] // 动态路由
      },
      mutations: {
        setRoutes(state, payload) {
          state.routes = payload;
        }
      },
      actions: {},
      modules: {}
    });
    

    注:主要注意以下几点:

    1. 需要判断页面是刷新还是路由切换,便于操作动态路由,避免重复添加
    2. 动态路由刷新后,需要进行二次跳转,以实现组件加载
    3. 动态路由的定义要符合 router 的数据结构。

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • title: VueRouter 动态路由配置的坑 tags: router dynamic VueRouter 动态路由配置的坑 最大的坑是在配置3级侧边栏动态路由。我们必须在二级路由界面添加<router-view />。这个问题耗时5个小时,最后还是...

    title: VueRouter 动态路由配置的坑
    tags:

    • router
    • dynamic

    VueRouter 动态路由配置的坑

    • 最大的坑是在配置3级侧边栏动态路由。我们必须在二级路由界面添加<router-view />。这个问题耗时5个小时,最后还是在我师傅的帮助下解决。

    路由js文件

      {
        path: '/loginHome',
        component: Layout,
        name: 'LoginHome',
        redirect: '/loginHome/login',
        meta: { title: 'LoginHome', icon: 'Login' },
        children: [{
          path: 'login',
          name: 'login',
          component: () => import('@/views/loginHome/login/index'), // Parent router-view
          meta: { title: 'Login' },
          children: [{
            path: '/show',
            name: 'Show',
            component: () => import('@/views/loginHome/login/show/index'),
            meta: { title: 'Show' }
          }, {
            path: '/code',
            name: 'Code',
            component: () => import('@/views/loginHome/login/code/index'),
            meta: { title: 'Code' }
          }]
        }]
      }
    

    二级路由页面模板

    <template>
      <div class="my_main">
        <router-view />
      </div>
    </template>
    <style scoped>
    .my_main{
      width: 100%;
      height: 100%;
    }
    </style>
    
    
    展开全文
  • vue动态添加路由,element-admin后台路由

    千次阅读 2019-07-18 18:05:38
    1.第一步,将后台数据转换成vue-router 需要的数据格式,以下是路由格式 declare type RouteConfig = { path: string; //路径 component?: Component;//对应模块 name?: string; // 命名路由 components?: ...

    很多后台项目的菜单都是可配置的
    所以需要从后台取到菜单数据并加到路由映射用

    1.第一步,将后台数据转换成vue-router 需要的数据格式,以下是路由格式

    declare type RouteConfig = {
      path: string; //路径
      component?: Component;//对应模块
      name?: string; // 命名路由
      components?: { [name: string]: Component }; // 命名视图组件
      redirect?: string | Location | Function;
      props?: boolean | Object | Function;
      alias?: string | Array<string>;
      children?: Array<RouteConfig>; // 嵌套路由
      beforeEnter?: (to: Route, from: Route, next: Function) => void;
      meta?: any;
    
      // 2.6.0+
      caseSensitive?: boolean; // 匹配规则是否大小写敏感?(默认值:false)
      pathToRegexpOptions?: Object; // 编译正则的选项
    }
    

    这里特别要注意的是component的写法
    component = () => import(@/views${nm.path})

    webpack 编译es6 动态引入 import() 时不能传入变量,例如import(dir) , 而要传入字符串 import(‘path/to/my/file.js’),这是因为webpack的现在的实现方式不能实现完全动态。

    但一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack;例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,从而实现懒加载。

    最后再用
    router.addRoutes(accessRoutes)
    将转换好的数组添加到路由映射中

    这里有一点需要注意,就是addRoutes应放在路由守卫

    router.beforeEach(async(to, from, next) => {
           router.addRoutes(accessRoutes)
    })
    
    展开全文
  • vue权限控制路由(vue-router 动态添加路由

    万次阅读 多人点赞 2018-09-13 15:13:36
    用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏。  思路如下:  一、定义初始化默认路由。 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回...

        用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏。

        思路如下:

        一、定义初始化默认路由。

    二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配。

    三、通过匹配,把匹配好的路由数据addRoutes到路由中。

    四、为了防止刷新页面后路由数据被清空,这里用判断是否登录的方式,再次加载动态路由。

    具体代码如下:

    router.js

    import Vue from 'vue'
    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
    }
    
    
    
    

    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.css

    body{
      margin: 0 auto;
      padding: 0;
      width: 100%;
      color:#6a6f8c;
      background: url("./img/login_1.png");
      background-size: cover;
    }
    body,html,.loginBody{
      height: 100%;
    }
    input, button {
      outline: none;
      border: none;
    }
    .title{
      text-align: center;
      color: #f3f3f3;
      font-size: 24px;
      margin-bottom: 40px;
      font-weight: bold;
    }
    .login-wrap{
      width:100%;
      margin: auto;
      max-width:400px;
      min-height:500px;
      position:relative;
      background:url(./img/login_1.png);
      box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
      margin-top: 4%;
    }
    .login-html{
      width:100%;
      height:100%;
      position:absolute;
      background:rgba(40,57,101,.9);
      padding: 50px 20px 30px 20px;
    }
    .ivu-form-item-content{
      height: 50px;
    }
    .login-form .group1{
      position: relative;
    }
    .icon-user{
      position: absolute ;
      left: 10px;
      top: 12px;
      z-index: 5;
      color: #666;
    
    }
    .login-form .group2{
      position: relative;
      padding-bottom: 10px;
    }
    .icon-pass{
      position: absolute ;
      left: 10px;
      top: 13px;
      z-index: 5;
      color: #666;
    }
    #imgObj{
      position: absolute ;
      width:40%;
      height: 30px;
      z-index: 5;
      left: 58%;
      top: 7px;
      border-radius:15px;
      opacity: 0.7;
    }
    .eyeDisabled{
      position: absolute ;
      left: 91%;
      top: 10px;
      z-index: 5;
      color: #666;
    }
    .eyeDisabled:hover{
      cursor: pointer;
    }
    .login-form .group .input{
      width:100%;
      color:#fff;
      display:block;
      text-indent: 23px;
      font-size: 15px;
      border:none;
      padding:5px 10px;
      border-radius:25px;
      background:rgba(255,255,255,.1);
    }
    .login-form .group .button{
      width:100%;
      color:#fff;
      display:block;
      border:none;
      padding:15px 20px;
      border-radius:25px;
      background:rgba(255,255,255,.1);
      margin-top: 20px;
    }
    .login-form .group input[data-type="password"]{
      text-security:circle;
      -webkit-text-security:circle;
    }
    
    .login-form .group .button{
      background:#1161ee;
    }
    .hr{
      height:2px;
      margin:20px 0 30px 0;
      background:rgba(255,255,255,.2);
    }
    .foot-lnk{
      text-align:center;
    }
    #imgObj:hover{
      cursor: pointer;
    }
     .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
      from { transform: rotate(0deg);}
      50%  { transform: rotate(180deg);}
      to   { transform: rotate(360deg);}
    }
    
    

    loginJs.js

    import {getMenuFuc} from '../../router/index'
    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;
        }
      }
    };
    

     

    展开全文
  • vue动态添加store、路由和国际化配置 想写公共能力?用这个吧 ... 从后端加载路由不再是梦 ... 从后端加载国际化,so easy ...
  • 用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏。 思路如下: 一、定义初始化默认路由。 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单...
  • 这里感谢router新加的addRoute...在前端添加一个菜单管理的界面来让我们可以在前端进行路由的相关配置信息 const router = new Router({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), isAddDynamicMenuRou
  • image.png在路由添加title,content配置image.png若添加if判断,在created内修改样式。image.png添加拦截器router.beforeEach((to, from, next) => {/* 路由发生变化修改页面meta */console.log(to.meta....
  • vue-router动态添加路由

    2020-03-24 10:57:58
    **vue-router动态添加路由** 一、定义初始化默认路由 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配 三、通过匹配,把匹配好的路由数据addRoutes到...
  • vue做后台管理页面,通常会涉及到权限管理,即,只有在权限允许的情况下才能查看相关页面...假设你的路由配置如下: import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/
  • vue - 动态路由

    2021-04-02 10:44:31
    vue-router 文档 方法使用:router.addRoutes(routes: Array<...modules文件夹内是不同用户角色对应的路由配置 每个文件内路由结构为routes: Array,跟正常配置路由一样格式 用户角色登录 设置用户信息(用于判
  • Vue 动态路由

    2019-11-19 12:12:04
    动态路由使用场景:由数据动态生成的列表,如新闻列表、问题列表、论坛标题列表等,它们拥有的数量很多,可能由成百上千条,如果一个一个添加路由信息是不可能实现的,这时候就用到了动态路由:设置一个路由信息,可...
  • //配置导入路由相关信息 import Router from 'vue-router' import login from '../pages/login' import Forbidden from '../pages/errorPage/403' import NotFound from '../pages/errorPage/404' import Layout ...
  • Vue动态路由

    2019-03-22 23:33:56
    (1)在router.js 中配置动态路由,注意:路径path后面加id就是动态添加路由:注意:id 是个动态值 { path: '/questions/:id', name: 'questions', component: Questions } 引入该路由: //下面引入...
  • vue 动态路由传参

    2020-03-16 22:48:19
    第一种:添加对应路由名称 通过手写进行路由跳转 console.log(this.$router); this.$router.push(""); // =》 通过name跳转 ...//动态路由 配置 router/index.js { path:'/detail/:myid', //动态路由 ...
  • 路由代码跳转 有些时候,页面的跳转可能需要执行的对应的JavaScript代码,这个时候就需要使用另外一中跳转方式了 this中有$router这个对象,就相当于app中实例的router。然后添加新的路径进去。 <template>...
  • 通过在 Vue 根实例的 router 配置传入 router 实例,$router、 $route 两个属性会被注入到每个子组件。 $router路由实例对象。 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router...
  • 在当前项目中使用的iview-admin,路由要根据权限动态生成,是在登录后获取当前用户权限内的路由使用 vue-router 的 addRoutes() 方法动态添加到路由表中 遇到的问题 项目目录 ... router index.js // 路由主...
  • vue router 动态路由及菜单实现之一

    千次阅读 2020-11-05 09:00:15
    之前将路由引入,按模块简单划分后,准备将路由和菜单结合起来。...要动态添加路由,主要用到的方法就是router.addRoutes 但这个方法在官方api的解释: 没错,就是这么简单,这个看第一眼就知道要苦了。但该用
  • router/index.js中只配置登录页面及首页的路径,其他页面在点击菜单时动态添加;我是这样写的: ``` this.$router.addRoutes([{ path : `/${pathName}`, name : pathName, component : resolve => require...
  • 一:通过接口获取路由配置(这个就不叙述了 不同得公司返回得东西都不太一样) 主要有以下几项 1.tabName 名字 2.path 链接 3.对应要加载组件得名称(根据这个去决定加载什么组件) 4是否是第一级得路由 这么一个...
  • 需求是:根据用户登录状态,后台识别状态返回路由...4.刷新页面时会404找不到页面,在main.js中添加存储,这不能直接存储转换过的路由数组,会报错; 路由格式一定要安装原静态路由格式写,不然会报错; ...
  • vue动态面包屑路由组件实现,无污染、易配置这几天开发一个vue项目,因为页面非常多,而且有面包屑需求开始想法: 每个页面用vue路由传参实现,每次跳转传参,页面根据参数设置面包屑路由;后来想法:规划好路由,将...
  • 1.动态路由配置遇到的坑: 众所周知,vue-router配置routes是有格式的,它有自己指定的字段属性比如name, path, component等等。其中最为特别的字段只有component,其他字段类型是字符串,但component传入的是一个vue...
  • vue-router的路由配置对象的复制问题addRoutes方法如何添加到子路由中去新增的路由对象如何和原路由合并如何判断动态添加的路由是否存在欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成...
  • 2、将后端返回的json数据动态添加到当前路由中。 3、菜单组件获取store中的数据来渲染菜单。 后端JSON保存 使用mockjs,模拟直接返回json报文 main.js 引入mock //mock测试引入 import './mock/mock.js' 配置请求...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 135
精华内容 54
关键字:

vue动态添加路由配置

vue 订阅