精华内容
下载资源
问答
  • 一、定义初始化默认路由。 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配。 三、通过匹配,把匹配好的路由数据addRoutes到路由中。 四、为了防止刷新...
  • Vue中实现动态路由

    2021-07-18 21:04:46
    动态路由设置一般有两种: 简单的角色路由设置:比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置 复杂的路由权限设置:比如OA系统、多种角色的权限配置。通常需要后端返回路由列表,...

    展示效果:
    在这里插入图片描述

    1、简单配置一个动态路由:
    我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个展示商品的组件,对于所有 上架状态 各不相同的商品,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:

    const routes = [
      {
        path: "/",
        component: () => import("@/views/Main.vue"),
        redirect: "/index",
        children: [
          {
            path: "/index/:id",
            component: () => import("@/views/Index.vue"),
          },
        ],
      },
    ];
    

    超级重点:一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。

    2、template部分:

    <div>
        <button @click="goPage(1)">查看上架</button>
        <button @click="goPage(2)">查看下架</button>
        <ul>
          <li v-for="(item,index) in showList" :key='index'>{{item.title}}	</li>
        </ul>
    </div>
    

    3、js部分:

    export default {
      name: "",
      data() {
        return {
          state: 1, //默认显示上架
          list: [
            { title: "眼影", state: 1 }, //1为上架,2为下架
            { title: "口红", state: 2 },
            { title: "防晒霜", state: 1 },
          ],
        };
      },
      computed: {
        showList() {
          return this.list.filter((item) => {
            return item.state == this.state;
          });
        },
      },
      methods: {
        goPage(val) {
          this.state = val;
          this.$router.push({
            path: "/index2/" + val,
          });
        },
      },
    };
    
    展开全文
  • vue实现动态路由一步到位

    千次阅读 多人点赞 2020-12-04 18:13:52
    最近在写vue项目,需要由后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由),就是配置vue动态路由啦。 由于错信了一些网上的文章:(,导致在这个问题上耗费了不少时间,想想,还是自己写一...

    最近在写vue项目,需要由后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由),就是配置vue动态路由啦。

    由于错信了一些网上的文章:(,导致在这个问题上耗费了不少时间,想想,还是自己写一篇文章来记录一下那些遇到的坑吧。

    接下来手把手记录一下,如何从零开始配置vue动态路由

    首先呢,先看看静态路由的配置,简单预览一下,熟悉的可以直接跳过,说这部分,是为了熟悉一下路由的配置,配置动态路由其实就是把静态路由存到数据库,在取出来放进路由表(静态是直接写在路由表里)。

    静态路由的回顾

    1.创建router/index.js文件,这里只有一些简单的页面

    import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '@/view/login/Login'
    import Index from '@/layout/Index'
    import Welcome from '@/layout/welcome/Welcome'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/login',
          name: 'Login',
          component: Login
        },
        {
          path: '/',
          component: Index,
          redirect: '/welcome',
          meta: {requireAuth: true},
          children: [
            {
              path: '/welcome',
              component: Welcome,
              name: '首页',
              meta: {title: '首页', requireAuth: true}
            }
          ]
        }
      ]
    })

    2.创建router/permission.js文件,配置导航守卫,可以在每次路由跳转前做一些操作,待会获取动态路由操作也在这里配置

    import router from '@/router/index'
    import 'element-ui/lib/theme-chalk/index.css'
    import '@fortawesome/fontawesome-free/css/all.min.css'
    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    
    NProgress.configure({
      easing: 'ease', // 动画方式
      speed: 500, // 递增进度条的速度
      showSpinner: false, // 是否显示加载ico
      trickleSpeed: 200, // 自动递增间隔
      minimum: 0.3 // 初始化时的最小百分比
    })
    // 白名单
    const whiteList = ['/login'] // no redirect whitelist
    
    // 导航守卫
    router.beforeEach((to, from, next) => {
      NProgress.start()
      if (to.meta.requireAuth) {
        // 判断该路由是否需要登录权限
        if (sessionStorage.getItem('loginName') !== null) {
          // 判断本地是否存在token
          next()
          // 这里是待会获取异步路由的地方
        } else {
          // 未登录,跳转到登陆页面
          next({
            path: '/login'
          })
        }
      } else {
        if (whiteList.indexOf(to.path) !== -1) {
          next()
        } else {
          if (sessionStorage.getItem('loginName') !== null) {
            // 判断本地是否存在token
            next(`/?redirect=${to.path}`)
          } else {
            next(`/login?redirect=${to.path}`)
          }
        }
      }
    })
    
    router.afterEach(() => {
      // 在即将进入新的页面组件前,关闭掉进度条
      NProgress.done()
    })
    

    这里引用了一个插件,Nprogress,就是下图的蓝色小进度条。不用也可以

     3.在main.js里引入刚才创建的router下的index.js文件和permission.js文件,如下

    import router from '@/router'
    import './router/permission'
    
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

    4.在App入口中放入路由跳转的视图区,跳转的路由页面都显示在这里

    // APP.vue文件
    <div id="app">
        <router-view />
    </div>

    现在静态路由就配好了,可以正常的跳转了!

    文件夹长这样

     

    动态路由的配置

    接下来开始配置动态路由了!

    有坑的地方我会说明一下。

    1.首先呢,router/index.js,没有什么需要改的,把你需要动态获取的路由信息删除掉即可,可以留一部分静态路由,如登录页,首页等等,若全删,routes赋为[]即可。

    2.创建一个文件,我命名为getAsyncRouter.js,用来处理获取到的动态路由信息。

    // 用于处理动态菜单数据,将其转为 route 形式
    export function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
      // 用于保存普通路由数据
      let temp = []
      // 用于保存存在子路由的路由数据
      let route = []
      // 遍历数据
      for (let i = 0; i < menuList.length; i++) {
        // 存在子路由,则递归遍历,并返回数据作为 children 保存
        if (menuList[i].children && menuList[i].children.length > 0) {
          // 获取路由的基本格式
          route = getRoute(menuList[i])
          // 递归处理子路由数据,并返回,将其作为路由的 children 保存
          route.children = fnAddDynamicMenuRoutes(menuList[i].children)
          // 保存存在子路由的路由
          routes.push(route)
        } else {
          // 保存普通路由
          temp.push(getRoute(menuList[i]))
        }
      }
      // 返回路由结果
      return routes.concat(temp)
    }
    
    // 返回路由的基本格式
    function getRoute (item) {
      // 路由基本格式
      let route = {
        // 路由的路径
        path: item.url,
        // 路由名
        name: item.name,
        // 路由所在组件
        // component: (resolve) => require([`@/layout/Index`], resolve),
        component: (resolve) => require([`@/view${item.curl}`], resolve),
        meta: {
          id: item.id,
          icon: item.icon
        },
        // 路由的子路由
        children: []
      }
      // 返回 route
      return route
    }

    这里是两个函数,把获取到的数据处理成路由表数据,将其变化成 route 的形式。

    fnAddDynamicMenuRoutes 用于递归菜单数据。
    getRoute 用于返回某个数据转换的 路由格式。
    注释写的应该算是很详细了,主要讲一下思路:
      对数据进行遍历,
      定义两个数组(temp,route),temp 用于保存没有子路由的路由,route 用于保存存在子路由的路由。
      如果某个数据存在 子路由,则对子路由进行遍历,并将其返回结果作为当前数据的 children。并使用 route 保存路由。
      如果某个数据不存在子路由,则直接使用 temp 保存路由。
      最后,返回两者拼接的结果,即为转换后的数据。
    route 格式一般如下:
      path:指路由路径(可以根据路径定位路由)。
      name:指路由名(可以根据路由名定位路由)。
      component:指路由所在的组件。
      children:指的是路由组件中嵌套的子路由。
      meta:用于定义路由的一些元信息。

    这里有个大坑!!! 在配置component的时候,需要动态导入组件,由于笔者这里使用的是webpack4+版本,所以不支持import动态导入方式,采用的是require的方式,并且在webpack文档中有这样一段话。

    clipboard.png

    综上所述,就是说,组件的导入可以使用字符串拼接的方式导入,可以使用模板字符串导入(字符串中含有变量),但是使用模板字符串导入时不能够只使用变量!!必须指定一个目录,不能全用变量代替!

    // 字符串拼接方式
    component: import('@/view'+'/sys/user')
    // 模板字符串方式,webpack4+版本需使用require方式,注意,`@${item.curl}`,是不行的!必须指定一个目录,不能全用变量代替
    component: (resolve) => require([`@/view${item.curl}`], resolve),

    这个现象其实是与webpack import()的实现高度相关的。由于webpack需要将所有import()的模块都进行单独打包,所以在工程打包阶段,webpack会进行依赖收集。

    此时,webpack会找到所有import()的调用,将传入的参数处理成一个正则,如:

    import('./app'+path+'/util') => /^\.\/app.*\/util$/
    

    也就是说,import参数中的所有变量,都会被替换为【.*】,而webpack就根据这个正则,查找所有符合条件的包,将其作为package进行打包。

    所以动态导入的正确姿势,应该是尽可能静态化表达包所处的路径,最小化变量控制的区域

    3.有了处理动态路由数据的函数,那就需要在合适的地方调用,以发挥作用。这时就需要用到beforeEach了,在router/permission.js文件,配置导航守卫,可以在每次路由跳转前做一些操作,这里就是获取动态路由了

    import router from '@/router/index'
    import 'element-ui/lib/theme-chalk/index.css'
    import '@fortawesome/fontawesome-free/css/all.min.css'
    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    import {fnAddDynamicMenuRoutes} from '@/router/getAsyncRouter'
    import {getRouter} from '@/api/sys/Menu'
    import store from '@/store'
    
    
    NProgress.configure({
      easing: 'ease', // 动画方式
      speed: 500, // 递增进度条的速度
      showSpinner: false, // 是否显示加载ico
      trickleSpeed: 200, // 自动递增间隔
      minimum: 0.3 // 初始化时的最小百分比
    })
    // 白名单
    const whiteList = ['/login'] // no redirect whitelist
    
    // 导航守卫
    router.beforeEach((to, from, next) => {
      NProgress.start()
      try {
        // 判断是否已经获取过动态菜单,未获取,则需要获取一次
        if (store.getters.dynamicRoutes.length === 0) {
          if (whiteList.indexOf(to.path) !== -1) {
            next()
          } else {
            getRouter().then(res => {
              if (res.code === 0) {
                let menuRouter = fnAddDynamicMenuRoutes(res.data[0].children)
                store.dispatch('app/dynamicRoutes', menuRouter).then(() => {
                  router.addRoutes(store.getters.dynamicRoutes)
                  next({...to, replace: true})
                })
              } else {
                console.log('获取动态路由失败!')
                next({path: '/login'})
              }
            })
          }
        } else {
          // 路由已存在或已缓存路由
          if (to.meta.requireAuth) {
            if (sessionStorage.getItem('loginName') !== null) {
              // 判断本地是否存在token
              next()
            } else {
              // 未登录,跳转到登陆页面
              next({path: '/login'})
            }
          } else {
            if (whiteList.indexOf(to.path) !== -1) {
              next()
            } else {
              if (sessionStorage.getItem('loginName') !== null) {
                // 判断本地是否存在token
                next(`/?redirect=${to.path}`)
              } else {
                next(`/login?redirect=${to.path}`)
              }
            }
          }
        }
      } catch (error) {
        console.log('出错了')
        next(`/login?redirect=${to.path}`)
      }
    })
    
    router.afterEach(() => {
      // 在即将进入新的页面组件前,关闭掉进度条
      NProgress.done()
    })
    
    

    注释写的比较详细了,主要说下思路:

    • 首先确定获取动态菜单数据的时机。一般在登录成功跳转到主页面时,获取动态菜单数据。

          由于涉及到路由的跳转(登录页面 -> 主页面),所以可以使用 beforeEach 进行路由导航守卫操作。
          但由于每次路由跳转均会触发 beforeEach ,所以为了防止频繁获取动态路由值,这里采用vuex方式存储了获取的路由信息,如果已获取路由,就直接跳转,否则就获取一次动态菜单数据并处理。

    • 如果不采用vuex方式也可以存到sessionStorage里面,总之就是保存一下获取的路由信息,以免重复获取。

    4接下来看一看,store的写法

    
    const state = {
      dynamicRoutes: []
    }
    
    const mutations = {
      DYNAMIC_ROUTES (state, routes) {
        state.dynamicRoutes = routes
      }
    }
    
    const actions = {
      dynamicRoutes ({commit}, routes) {
        commit('DYNAMIC_ROUTES', routes)
      }
    }
    

    注意:vue是单页面应用程序,所以页面一刷新数据部分数据也会跟着丢失,所以我们需要将store中的数据存储到本地,才能保证路由不丢失。

    到这里,动态路由就已经配置好了,总体来说不是很难,主要是有坑!但只要理清了思路,写起代码就会很清晰。

     

    说一些笔者遇到的问题,

    1.首先是component动态导入的问题,由于webpack的版本不同,需要根据情况来采用import和require方式来导入,如果导入不正确多半会报错,找不到module等等。或者不报错,但路由跳转是空白页。如果导入正确则一定可以跳转正常,否则,请查找正确的导入方法!路由跳转正确,能显示跳转的组件,就完成了一大半!

    2.路由的跳转的地方,由于我们项目采用的是左侧菜单栏,有二级菜单,所以当路由跳转正常时,还需确定路由跳转所渲染的位置是否正确!

     

    后记:

    在刷新页面时遇到一个问题,动态路由表会随着vuex的刷新而消失。

    处理:这里在app.vue页面刷新时利用sessionStorage存储一下store,防止刷新丢失vuex。

    如下:

    export default {
      name: 'App',
      created () {
        // 在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem('storeData')) {
          this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('storeData'))))
        }
        // 在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener('beforeunload', () => {
          sessionStorage.setItem('storeData', JSON.stringify(this.$store.state))
        })
        // 兼容iphone手机
        window.addEventListener('pagehide', () => {
          sessionStorage.setItem('storeData', JSON.stringify(this.$store.state))
        })
      }
    }

    另外,在登录成功后也获取了一下动态路由。这样处理下来,刷新时也不会丢失路由了!

    // 获取动态路由
    getRouter().then(res => {
      if (res.code === 0) {
        let menuRouter = fnAddDynamicMenuRoutes(res.data[0].children)
        store.dispatch('app/dynamicRoutes', menuRouter).then(() => {
          router.addRoutes(store.getters.dynamicRoutes)
        })
        console.log(store.getters.dynamicRoutes)
      } else {
        console.log('获取动态路由失败!')
        router.push('/login')
      }
    })

     

     

     

    展开全文
  • Vue动态路由传参和监听路由

    千次阅读 2020-04-20 10:21:44
    Vue动态路由传参 query传参 params传参 //定义Detail路由 { path: '/detail/:id', name: 'Detail' component: () => import('@/views/Detail.vue') } 1.query方式传参和接收参数 传参: this.$router.push({...

    Vue动态路由传参

    • query传参
    • params传参
    //定义Detail路由
    {
         path: '/detail/:id',
         name: 'Detail'
         component: () => import('@/views/Detail.vue')
    }
    

    1.query方式传参和接收参数

    传参:

    this.$router.push({
            path:'/detail/:id',
            query:{
              id:id
            }
          })
    

    接收参数:

    this.$route.query.id
    

    Tips:

    传参是this. r o u t e r , 接 收 参 数 是 t h i s . router,接收参数是this. router,this.route,这里千万要看清了!!!

    2.params方式传参和接收参数

    传参:

    this.$router.push({
            name:'Detail',
            params:{
              id:id
            }
          })
    

    接收参数:

    this.$route.params.id
    

    Tips:

    params传参,push里面只能是 name:‘xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

    另外,二者还有点区别:

      1. 接收参数
    // query通过this.$route.query接收参数
    created () {
        const id = this.$route.query.id;
    }
     
    // params通过this.$route.params来接收参数
    created () {
        const id = this.$route.params.id;
    }
    
      1. 切换路由
    // query通过path切换路由
    <router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
    // params通过name切换路由
    <router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>复制代码
    

    简单说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,浏览器刷新页面不会消失,而params相当于post请求,参数不会在地址栏中显示,浏览器刷新页面后消失。

    3.this. r o u t e r 和 t h i s . router和this. routerthis.route有何区别?

    在控制台打印两者可以很明显的看出两者的一些区别:

    clipboard.png

    • 1. r o u t e r 为 V u e R o u t e r 实 例 , 想 要 导 航 到 不 同 U R L , 则 使 用 router为VueRouter实例,想要导航到不同URL,则使用 routerVueRouterURL使router.push方法。
    • 2.$route为当前router跳转对象,可以获取name、path、query、params等。

    Vue监听路由

    方式一:监听$router

    复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:

      watch: {
        '$route' (to, from) {
          // 对路由变化作出响应...
        }
      }
    

    方式二:唯一值 key 属性

    Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可

    <router-view :key="key"></router-view>
    
    computed: {
        key() {
            return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
        }
     }
    

    使用computed属性和Date()可以保证每一次的key都是不同的,这样就可以如愿刷新数据了。

    实践

    1. 定义路由

          {
              path: '/hse/problem/prMain/deal/:id',
              component: () => import('@/views/hse/Problem/PrDeal.vue'),
              meta: {
                keepAlive: true
              }
            },
    

    2. 动态路由传参

     	handleDeal(id){
                  this.$router.push(
                    {
                      path: `/hse/problem/prMain/deal/${id}`,
                      params: {id: id}
                    }
                  )
                }
    

    3. 监听路由

              watch:{
               //监听路由
               $route(){
                 if(this.$route.params!==null){
                   this.paramId = this.$route.params.id;
                 }
               },
                paramId(newVal,oldVal){
                  if(newVal !== undefined && newVal !== null){
                      //初始化数据	
                      this.init();
                  }
                }
              }
    

    4. init方法初始化数据

    methods:{
                  //初始化数据
                  init(){
                    let vm = this;
                    vm.$nextTick(()=>{
                      vm.$axios.get(`/hse/sim/prProblem/v1/get/${vm.dataId}`).then(reply=>{
                        vm.form = reply.data;
                      }).catch(e=>{
                        vm.$toast.fail(e);
                      })
                    })
                  }
    }
    
    展开全文
  • --可以通过query ,param两种方式 区别:query通过url传参,刷新页面还在 params刷新页面不在...-- 动态路由-params --> //在APP.vue中 <router-link :to="'/user/'+userId" replace>用户</router-link...

    --可以通过query ,param两种方式

    区别: query通过url传参,刷新页面还在    params刷新页面不在了
       
    params的类型:

    • 配置路由格式:/router/:id
    • 传递的方式:在path后面跟上对应的值
    •  传递后形成的路径:/router/123
    <!-- 动态路由-params -->
    
    //在APP.vue中
        <router-link :to="'/user/'+userId" replace>用户</router-link>    
    
    //在index.js
         {
        path: '/user/:userid',
        component: User,
        },

    跳转方法:

    // 方法1:
    <router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link>
    // 方法2:
    this.$router.push({name:'users',params:{uname:wade}})
    // 方法3:
    this.$router.push('/user/' + wade)

    可以通过$route.params.userid 获取你说传递的值

       query的类类型

    •   配置路由格式:/router,也就是普通配置
    •   传递的方式:对象中使用query的key作为传递方式
    •   传递后形成的路径:/route?id=123
    <!--动态路由-query -->
    //01-直接在router-link 标签上以对象的形式
    <router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">档案</router-link>
    /*
        02-或者写成按钮以点击事件形式
        <button @click='profileClick'>我的</button>    
    */
    
     //点击事件
     profileClick(){
       this.$router.push({
            path: "/profile",
            query: {
              name: "kobi",
              age: "28",
              height: 198
            }
          });
     }

    跳转方法:

    // 方法1:
    <router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
    // 方法2:
    this.$router.push({ name: 'users', query:{ uname:james }})
    // 方法3:
    <router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>
    // 方法4:
    this.$router.push({ path: '/user', query:{ uname:james }})
    // 方法5:
    this.$router.push('/user?uname=' + jsmes)

    可以通过$route.query 获取你说传递的值

    展开全文
  • Vue路由篇之动态路由匹配 详情请见注释 .active{ font-size: 100px; color:red } 前端研发 职位 搜索 const position={//定义局部组件 template:` position ` } const search={
  • 路由的定义,主要有以下几步: ...定义路由组件,如: const Foo = { template: '&lt;div&gt;foo&lt;/div&gt;' }; 定义路由(数组): const routes = [ { path: '/foo', component: Foo }...
  • vue-router 动态路由详解

    千次阅读 2019-10-28 17:39:00
    一、动态路由适用于什么场景 比如写用户的信息页面时,页面的结构都一样,只是用户的名称不一样,这个时候就可以使用动态路由 二、下面写个小案例 1、创建用户管理页面testRouter3.vue <template> <div>...
  • 最近做vue 单页项目涉及到多...第1步 定义默认路由动态路由 //动态路由(所有角色的都在这里,我们都做好组件页面了所以我们一定有这个,防君子不防小人) export const dynamicRouter = [ { path: '/b', name: 'b'
  • 我们经常需要把某个模式匹配到的所有路由,全都映射到同一个组件,例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染,那么我们可以在vue-router的路由路径中使用 “动态路由参数” ...
  • Vue动态路由的前端实现

    千次阅读 2021-01-30 19:58:57
    Vue动态路由的前端实现,网上有不少参考资料。但大多存在代码冗余,思路模糊不清的情况。现在整理一下思路。当前端发送登录请求login向后台请求数据后,后台会返回一个user对象至前端,前端把该对象保存至vuex中,...
  • 在配置路由时,路由路径上添加参数,既配置成动态路由。在修改操作时,就常用到动态路由配置。 配置动态路由: let update= { path: '/update/:uid/:name', name: 'Update', component: () => import('@/...
  • Vue 动态添加路由实现

    2020-06-13 18:51:37
    项目需求:除固定的模块使用静态路由定义外,其他路由由后端定义配置后,以接口的形式返回给前端动态添加。这里使用 vue-router addRoutes 方法操作。 具体实现方式如下: // main.js import Vue from "vue"; ...
  • 动态路由的理解 个人理解:动态路由就是把匹配某种模式下的路由映射到同个组件中,其实本质就是通过url进行传参 比如说:有一个商品Goods的组件,我们需要让不同的商品id都映射到这个组件中,此时就需要用到动态路由...
  • vue权限控制路由vue-router 动态添加路由

    万次阅读 多人点赞 2018-09-13 15:13:36
     一、定义初始化默认路由。 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配。 三、通过匹配,把匹配好的路由数据addRoutes到路由中。 四、为了...
  • vue动态挂载路由

    千次阅读 2019-09-27 10:21:09
    使用vue开发通常我们是遍历路由(this.$router.options.routes)生成用户菜单,vue中提供了addRouter()方法用于动态挂载路由,我们可以根据用户权限结合该方法实现用户路由动态生成。代码如下: (1) router.js:...
  • 登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', ...
  • vue定义嵌套路由

    千次阅读 2019-08-11 00:53:59
    其实很简单,只需要我们在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。 下面为示例代码: index.html,只有一个路由出口 <div id="app"> <!-- router-view 路由出口, 路由...
  • VUE动态路由页面挂载

    千次阅读 2020-04-27 18:07:50
    定义路由,包括常页面路由和需要权限的路由数组 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Layout from '@/layout' export const StaticRouterMap = [ { path: '/login'...
  • vue-router定义路由的四种方式

    千次阅读 2020-06-11 10:48:49
    目录路由类型动态路由匹配嵌套路由编程式路由命名路由 路由类型 动态路由匹配 嵌套路由 编程式路由 命名路由和命名视图 动态路由匹配 在路由路径里添加“/:参数名” path: '/goods/:goodsId' 组件里获取参数使用 ...
  • Vue 动态添加路由及生成菜单

    千次阅读 2019-06-19 17:57:36
    更多文章 写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和...利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Arr...
  • vue后台管理配置动态路由菜单

    千次阅读 2020-11-05 11:32:20
    vue后台管理配置动态路由菜单(个人总结) 前段时间做一个后台管理项目,因为超级管理员可以给普通管理员动态更改权限,所以vue-element-admin里的写死的权限路由菜单就不太适合我,自己研究了好半天,经历了各种死...
  • 1. 定义路由 2. 路由参数 3. 嵌套路由 4. 路由重定向 5. 路由导航:router-link 一. 定义路由 1、说明 路由是单页面应用程序(SPA)的关键,Vue提供过来路由插件,使用这个路由就要安装这个插件 安装: npm ...
  • 基于VUE实现前端动态路由权限控制

    千次阅读 2020-02-29 23:32:07
    最近在项目中遇到权限控制的问题,由于自己接触前端也不久,对于路由这方面知识还有所欠缺,因此一直在网上找寻各种解决方案。最终还是看到花裤衩大佬的博客,终于对前端实现路由权限控制有了些许思路。 传送门:...
  • 本文记录Vue.js如何使用路由功能(包括设置默认路由路由跳转)以及使用动态路由(url传值)和get传值。 Vue.js下使用路由功能 要使用路由功能必须先在项目中安装官方提供的vue-router库,cmd进入项目文件夹,...
  • 先附上gitHub地址https://github.com/DorisLiu6/VueDemo,不妨下载试试吧,后续也将在该项目中持续更新vue相关内容。有疑问欢迎给我留言喔,最后转载请注明出处,谢谢。 路由 路由不仅前端有,源于服务器端,前端...
  • vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果列表页时,搜索结果列表页面要重新获取...首先在我们的app.vue定义keep-alive <keep-alive> <router-view v-if="$route.meta.keepA
  • Vue-动态添加路由

    千次阅读 2019-07-01 15:30:54
    Vue-动态添加路由 最近项目中有个需求 - 需要动态添加页面以及路由。过程很煎熬。但是实现之后,再看一下流程、代码,其实发现并没有多少东西。 添加嵌套的子路由 const children = [] const routerData = [{ /...
  • vue动态路由商品详情

    2020-05-12 22:32:21
    我们不可能为每一个商品都定义一个独立的组件,而是把它们都映射到同一个组件,同时 url后面的部分为动态变化的部分,我们会在设计路由的时候进行特殊的处理 import Vue from 'vue' import VueRouter from 'vue-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,785
精华内容 14,714
关键字:

vue怎么定义动态路由

vue 订阅