精华内容
下载资源
问答
  • 主要介绍了vue动态路由配置vue路由传参的方式,文中给大家提到了router-link这个组件的相关知识,需要的朋友可以参考下
  • 很多时候我们在项目的路由都是在前端配置好的 但是有的时候为了进行全面的权限控制,会需要后台给出路由表,前端再渲染。不用在前端配置。 下面主要讲一下思路 1、和后台小哥哥沟通好数据,把我们前端配置的路由表...
  • vue动态路由配置

    千次阅读 2017-12-15 10:35:45
    最近写的一个项目,需要配置一个动态路由,就是路径调到一个页面上去,而且后面的参数是可传可不传的。废话不多说看代码…… 在index.js文件下export default new Router({ routes: [ { //根路由 path: '/', ...

    最近写的一个项目,需要配置一个动态的路由,就是路径调到一个页面上去,而且后面的参数是可传可不传的。废话不多说看代码……
    在index.js文件下

    export default new Router({
      routes: [
        {
          //根路由
          path: '/',
          redirect: '/home'
        },
        {
          //注册页(1)
          path: '/register',
          name: 'register',
          component: Register,
        },
        {
          //注册页(2)
          path: '/register/:id',
          name: 'register',
          component: Register,
        },
     ]

    你会发现我写了两个注册页面的路由,看//注册页(1)这里是不带参数的路由,//注册页(2)是带参数的路由,而且path: ‘/register/:id’ 路径后面加上:id 便是匹配任意的参数。最后两个路由的component: Register,一定要相同。这样一个动态的(可传可不穿传参数)路由就搞定了。

    展开全文
  • vue动态路由配置vue路由传参

    万次阅读 2018-05-23 09:28:44
    动态路由:  当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据  这就要用到动态路由路由...

    动态路由:

      当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据

      这就要用到动态路由跟路由传参了!

    首先我们来了解下router-link这个组件:

      简单来说,它是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以浏览器端查看到

      并且当一个导航器被激活的时候,会自动加上一个css的激活样式,可以全局在路由配置中设置linkActiveClass属性,属性名就是样式css名,一般写为active

      现在基本了解了router-link,先讲一下动态路由配置吧

    我们在配置路由的时候,将目标组件的路径先配置好,如:

    比如多个路由都要进入List组件,这时候在配置路由路径后加个:id(id可随便取名,标识),这个属性id可以在$route.params.id中获取,例如:

    当前这个child组件要进入,以上配置的id就等于on;这时候在List组件中打印出$route.params.id就可以得到这个属性值on

    这个时候,不同组件进入同一目标组件时就可以得到标识跟备注了,也可以利用这个来传递一些正常的参数

    接着往下看,带参数的路由,跟获取传来的参数值

    当router-link被激活点击时,会将当前的to的值push到router对象当中(路由栈),所以这个值可以是string也可以是obj

    传参数的时候,我们就写成对象的形式,用到v-bind的js表达式

    此时整个的理解可以为:我是child组件过来的,而且我还带来了我的名字,我叫child

    在List组件当中去获取这个参数值跟id的值

    如果是不同的组件过来的,可以设置不同的id值,只要在目标组件获取属性id的值就可以了,参数就利用query.属性值来获取

    转载:https://www.cnblogs.com/zlbrother/p/7707221.html

    展开全文
  • 利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 举个例子: ...
  • import Vue from 'vue'; ...// 模块路由名称(与文件夹名称相同) const moduleNameList = [ "basicService", "equipment", "upkeep", "workOrderRouter", "medicalWaste", "inspection", "or
    import Vue from 'vue';
    import Router from 'vue-router';
    import config from '@/config';
    
    Vue.use(Router);
    
    // 模块路由名称(与文件夹名称相同)
    const moduleNameList = [
      "basicService",
      "equipment",
      "upkeep",
      "workOrderRouter",
      "medicalWaste",
      "inspection",
      "orderResource",
      "taskCode",
      "warehouse",
      "clientRelation",
      "transport",
      "construction"
    ];
    // 动态路由
    export const asyncRoutes = [];
    
    // 固定路由
    export const constantRoutes = [
      // {
      //   name: "index",
      //   path: "/",
      //   component: () => import("@/views/index")
      // }
    ]
    
    const createRouter = () => new Router({
      // mode: 'history', // require service support
      linkActiveClass: 'active',
      routes: [].concat(constantRoutes, asyncRoutes)
    })
    
    // router 
    const router = createRouter();
    
    // 配置的模块
    const modules = config.modules;
    
    function genAsyncRoutes(mList) {
      let count = mList.length;
      mList.forEach(moduleName => {
        if (moduleNameList.includes(moduleName)) {
            import(`./${moduleName}/${moduleName}`).then(route => {
              route.default.forEach(val =>{
                asyncRoutes.push(val);
              })
              if (--count === 0) {
                router.addRoutes(asyncRoutes);
              }
            });
        }
      });
    }
    
    // 处理模块
    function disposeModules() {
        if (typeof modules === 'string') {
          if (modules === 'all') {
            genAsyncRoutes(moduleNameList);
          } else if (moduleNameList.includes(modules)) {
            genAsyncRoutes([modules]);
          }
        } else if (modules instanceof RegExp) {
          genAsyncRoutes(moduleNameList.filter(name => modules.test(name)));
    
        } else if (modules instanceof Array) {
          genAsyncRoutes(modules);
        }
    }
    disposeModules();
    

    config.js 里面加个配置 modules:‘all’ 来控制

    module.exports =  {
     target: '210', // 生产 production  测试 205 ,208
     debug: true,
     timeout: 100000,
     userInfo: null,
     modules:'medicalWaste' // 模块区分打包配置 对应路由模块的文件夹名称,all 表示全量打包 ["basicService","medicalWaste"]
    }
    

    vue.config.js

    'use strict'
    const webpack = require('webpack')
    const path = require('path')
    const fs = require('fs')
    const config = require('./src/config')
    
    function resolve(dir) {
      return path.join(__dirname, dir)
    }
    
    const name = 'vue project' // page title
    // const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin'); // 骨架屏引入
    // If your port is set to 80,
    // use administrator privileges to execute the command line.
    // For example, Mac: sudo npm run
    const port = 8081 // dev port
    const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入CDN配置插件
    const externals = { // 不打包插件
      // vue: 'Vue',
      // 'vue-router': 'VueRouter',
      // vuex: 'Vuex',
      // axios: 'axios',
      // 'element-ui': 'ElementUI',
      // vconsole:'vConsole', // 生产打包放开
      moment: 'moment',
      echarts: 'echarts'
    }
    const cdn = {
      // 开发环境
      dev: {
        css: [
    
        ],
        js: [
    
        ]
      },
      // 生产环境 配置对应CDN地址
      build: {
        css: [
          // 'https://cdn.bootcdn.net/ajax/libs/element-ui/2.5.4/theme-chalk/index.css'
        ],
        js: [
          // 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
          // 'https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js',
          // 'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
          // 'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
          'https://cdn.bootcdn.net/ajax/libs/moment.js/2.23.0/moment.min.js',
          'https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.min.js'
        ]
      }
    }
    
    function genIgnoreReg(all,list){
      let idx;
      list.forEach(module =>{
        idx = all.indexOf(module);
        if(idx !== -1) all.splice(idx,1); 
      })
      return new RegExp(`(${all.join('|').replace(/\|$/,'')})`);
    }
    
    const routeList = fs.readdirSync('./src/router');
    
    // 动态打包模块
    const modules = config.modules;
    let ignoreReg = null;
    if (typeof modules === 'string') {
      if (modules !== 'all') {
        ignoreReg = genIgnoreReg(routeList,[modules]);
      } 
    } else if (modules instanceof Array) {
      ignoreReg = genIgnoreReg(routeList,modules);
    }
    // All configuration item explanations can be find in https://cli.vuejs.org/config/
    module.exports = {
    
      // 205 || 生产
      // publicPath: '/web/vue/',
      runtimeCompiler: true, // 运行时报错配置
      publicPath: '/',
      outputDir: 'dist',
      assetsDir: 'static',
      // eslint-loader是否在保存的时候检查
      lintOnSave: false,
      // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
      productionSourceMap: false,
      devServer: {
        port: port,
        open: true,
        overlay: {
          warnings: false,
          errors: true
        },
        // 跨域代理
        proxy: {
          "/api": {
            target: 'http://192.168.1.70:7979',
            changeOrigin: true, // 是否改变域名
            ws: true
            // pathRewrite: {
            //   // 路径重写
            //   "/api": "" // 这个意思就是以api开头的,定向到哪里, 如果你的后边还有路径的话, 会自动拼接上
            // }
          }
        }
      },
      configureWebpack: {
        // provide the app's title in webpack's name field, so that
        // it can be accessed in index.html to inject the correct title.
        name: name,
        resolve: {
          alias: {
            '@': resolve('./src'),
            'assets': resolve('./src/assets'),
            'style': resolve('./src/style')
          }
        },
        plugins:ignoreReg ? [ new webpack.IgnorePlugin(ignoreReg,/router$/)] : undefined,
        externals: process.env.NODE_ENV === 'production' ? externals: {}
      },
      css: {
          extract: true, // css拆分ExtractTextPlugin插件,默认true - 骨架屏需要为true
          loaderOptions: {
              postcss: {
                  plugins: [
                      require('postcss-plugin-px2rem')({
                          rootValue: 46, //换算基数, 默认100  ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                          // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                          //propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
                          // propBlackList: [], //黑名单
                          exclude: /(node_module)/,  //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
          // selectorBlackList: [], //要忽略并保留为px的选择器
                          // ignoreIdentifier: false,  //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
                          // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
                          mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。
                          minPixelValue: 0 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                      }),
                  ]
              }
          }
      },
      chainWebpack: config => {
          // config.entry.app = ['babel-polyfill', './src/main.js'];
          config.plugins.delete("preload"); // TODO: need test
          config.plugins.delete("prefetch"); // TODO: need test
    
          // 对vue-cli内部的 webpack 配置进行更细粒度的修改
          config.plugin('html').tap(args => {
            if (process.env.NODE_ENV === 'production') {
                args[0].cdn = cdn.build
            }
            if (process.env.NODE_ENV === 'development') {
                args[0].cdn = cdn.dev
            }
            return args
        })
        config.module
        .rule('images')
          .use('url-loader')
            .loader('url-loader')
            .tap(options => Object.assign(options, { limit: 2000, esModule: false })); // 配置线上图片转base64。 app 已有做浏览器缓存。转换过大,会加大首屏加载时长
    
          // set svg-sprite-loader
          // config.entry('main').add('babel-polyfill');
          config.module
          .rule('iview')
          .test(/iview.src.*?js$/)
          .use('babel')
            .loader('babel-loader')
            .end();
    
          config.module
            .rule("svg")
            .exclude.add(resolve("src/icons"))
            .end();
          config.module
            .rule("icons")
            .test(/\.svg$/)
            .include.add(resolve("src/icons"))
            .end()
            .use("svg-sprite-loader")
            .loader("svg-sprite-loader")
            .options({
              symbolId: "icon-[name]"
            })
            .end();
    
          // set preserveWhitespace
          config.module
            .rule("vue")
            .use("vue-loader")
            .loader("vue-loader")
            .tap(options => {
              options.compilerOptions.preserveWhitespace = true;
              return options;
            })
            .end();
    
          config
          // https://webpack.js.org/configuration/devtool/#development
          .when(process.env.NODE_ENV === "development", config =>
            config.devtool("cheap-source-map")
          );
    
          config.when(process.env.NODE_ENV !== "development", config => {
            config
              .plugin("ScriptExtHtmlWebpackPlugin")
              .after("html")
              .use("script-ext-html-webpack-plugin", [
                {
                  // `runtime` must same as runtimeChunk name. default is `runtime`
                  inline: /runtime\..*\.js$/
                }
              ])
              .end();
            config.optimization.splitChunks({
              chunks: "all",
              cacheGroups: {
                libs: {
                  name: "chunk-libs",
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: "initial" // only package third parties that are initially dependent
                },
                // elementUI: {
                //   name: "chunk-elementUI", // 将elementUI拆分成一个包
                //   priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                //   test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 以适应cnpm
                // },
                commons: {
                  name: "chunk-commons",
                  test: resolve("src/components"), // 可以自定义规则
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            });
            config.optimization.runtimeChunk("single");
          });
      }
    }              
    
    展开全文
  • 一般用于后台管理系统,登陆成功后台返回...设定角色:例如超级管理员,普通用户,给角色配置菜单权限,将菜单列表以树状图结构返回,利用element的tree组件展示,勾选上哪个菜单就表示有权限进入这个页面 菜单管理(menu...

    一般用于后台管理系统,登陆成功后台返回可用路由,将router的路由进行匹配,对用户进行限制
    分3个板块

    1. 账号管理(account)
      给账号绑定角色(多选),一个账号可绑定多个角色
      在这里插入图片描述

    2. 角色管理(role)
      设定角色:例如超级管理员,普通用户,给角色配置菜单权限,将菜单列表以树状图结构返回,利用element的tree组件展示,勾选上哪个菜单就表示有权限进入这个页面
      在这里插入图片描述

    3. 菜单管理(menu)
      菜单列表添加你后台管理系统router配置的每个path名称,
      在这里插入图片描述
      登录后根据返回的权限路由(menus)与router配置递归比较修改meta.show=true(自定义)这样就可以控制导航菜单显示,将返回的menus储存,在路由拦截调取,并判断当前要跳转的路由是否在权限内,否则不跳转并提示
      在login.vue中
      登录成功后后台返回路由信息
      在这里插入图片描述

    import routes from '../router/routes'
    export default {
    data() {
            return {
                form: {
                    password: '',
                    account: ''
                },
                routerArr: []
            }
        },
    methods: {
            login() {
                if (this.form.account == '') {
                    this.$message.error('请输入账号')
                    return false
                }
                if (this.form.password == '') {
                    this.$message.error('请输入密码')
                    return false
                }
                this.$api.login(this.form).then((data) => {
                    if (data.code == 200) {
                        let menus = data.data.menus
                        localStorage.setItem('menu', JSON.stringify(menus))
                        let arr = []
                        for (let i in menus) {
                            arr.push(menus[i].path)
                        }
                        arr = arr.join(',')
                        localStorage.setItem('menusRouter', arr)
                        localStorage.setItem('accessToken', data.data.accessToken)
                        this.mapRoot(menus, routes[1].children)
                    }
                })
            },
            mapRoot(arr, routerArr) {
                for (let i in routerArr) {
                    for (let j in arr) {
                        if (
                            routerArr[i].path == arr[j].path &&
                            routerArr[i].path != ''
                        ) {
                            if (routerArr[i].meta.isMenu != undefined) {
                                routerArr[i].meta.isMenu = true
                            }
                            break
                        }
                    }
                    if (routerArr[i].children && routerArr[i].children.length > 0) {
                        this.mapRoot(arr, routerArr[i].children)
                    }
                }
                this.$router.push({ path: '/main' })
            }
        }
      }
    

    这是我router.js配置部分代码

    {
                    path: 'groupQuesList',
                    name: 'groupQuesList',
                    component: () => import('@/views/topic/groupQuesList.vue'),
                    meta: {
                        isMenu: false,//true为显示在导航,默认全是false
                        icon: 'el-icon-edit-outline',
                        title: '组试题'
                    }
                },
                {
                    path: 'groupBangTi',
                    name: 'groupBangTi',
                    component: () => import('@/views/topic/groupBangTi.vue'),
                    meta: {
                        title: '组-绑定试题' //不显示在导航的页面不要设置isMenu
                    }
                }
    

    如有写的不明白的地方请在下方留言

    展开全文
  • 主要介绍了Vue结合路由配置递归实现菜单栏,本文通过实例代码给大家介绍的非常详细,对大家的学习火锅工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要给大家介绍了关于vue路由教程之静态路由的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 主要介绍了vue-router动态路由设置参数可选,文中给大家提到了vue-router 动态添加 路由的方法,需要的朋友可以参考下
  • 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配。 三、通过匹配,把匹配好的路由数据addRoutes到路由中。 四、为了防止刷新页面后路由数据被清空,这里...
  • Vue动态路由配置,f5刷新动态路由丢失,路由重定向报Promise的错误----------------其实超级简单 业务流程 用户登录(获取token) 得到用户token后,可以携带token(如果不需要token,请略过此步骤)请求动态路由...
  • vue后台管理配置动态路由菜单

    千次阅读 2020-11-05 11:32:20
    vue后台管理配置动态路由菜单(个人总结) 前段时间做一个后台管理项目,因为超级管理员可以给普通管理员动态更改权限,所以vue-element-admin里的写死的权限路由菜单就不太适合我,自己研究了好半天,经历了各种死...
  • vue动态路由配置

    2019-08-15 11:44:59
    1.参数的设置 ‘/goods/:goodsId’ mode:’hash‘,或者history’,对url 地址#号会改变(哈希地址和正常地址) 2.接受参数的设置 {{$router.params.goodsId}}
  • vue动态路由来生成系统菜单(一)

    千次阅读 2019-03-15 15:50:48
    先说下功能吧,就是菜单通过动态路由进行渲染出来,而不是路由配置写死来实现。虽然网上已经有各种帖子来介绍,但我还是折腾了快2天才搞定。 直接上代码吧 <template> &...
  • 1 什么的动态路由 根据路径不同,显示内容不同。就像图片路径:image/1 ,其中变化的就是这个“1”,根据这个数字的变化会展示不同的图片。 2 页面编写 在src/components路径下创建item.vue,其中内容为(当然你也可以...
  • 主要介绍了Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制的相关知识,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue动态路由路由懒加载

    多人点赞 2021-06-28 16:33:26
    这种path和Component的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)。 1、配置router 2、使用路由 3、创造用户组件并使用传进来的用户信息 在compute中用this.$route.params.userId,...
  • VUE 动态路由配置,以及vuerouter生命周期函数失效的问题 如何配置动态路由 在router/index下配置 { path:'/user:id',//使用:就可以将id变为动态绑定 name:'user' } 遇到的问题 组件会复用,生命周期函数不会被...
  • Vue动态路由生成跳转外链的菜单

    千次阅读 2019-11-05 15:10:13
    // 为了防止出现后端返回结果不... // 如果为外部跳转,则增加beforEnter处理,target设置为blank if (!currentRouter.path.startsWith('http')) { currentRouter.path = currentRouter.path.replace('//', '/'...
  • 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view ...
  • 本篇文章主要介绍了vue addRoutes实现动态权限路由菜单的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue-router动态路由配置

    2020-12-07 10:00:19
    实现动态路由配置关键是路由嵌套配合router-view(可以看作一个容器,存放匹配到的路由组件) 例: { path: '/', //匹配第一层菜单 component: Layout,//整体布局的组件 redirect: '/dashboard', children: [{ //...
  • 根据vue官方文档,对于重定向有详细的示例,但是关于使用方法动态重定向的描述却不多,重定向部分的描述如下: 重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new Vue...
  • 在修改操作时,就常用到动态路由配置。 配置动态路由: let update= { path: '/update/:uid/:name', name: 'Update', component: () => import('@/views/update.vue'), children : [] }; 在对应页面...
  • 最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id) 功能比如:A列表页面路由如/a,...
  • vue 动态路由

    2021-01-20 12:34:39
    1.新建路由 User.vue ...2.配置路由映射 { path: '/user/:userId', component: () => import(/* webpackChunkName: about */ '../views/User.vue') } 3.在app.vue中使用 Home | About |
  • vue二级路由设置方法

    2020-08-28 01:06:54
    下面小编就为大家分享一篇vue二级路由设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 76,934
精华内容 30,773
关键字:

vue动态路由配置

vue 订阅