vue动态路由配置

2023-5-1 08:23| 发布者: 开心| 查看: 14| 评论: 0

阅读字号:

摘要: 本文将介绍如何vue动态路由配置，以及怎么维修vue动态路由配置指令。同时，我们还将分享一些有关的相关信息，希望对您有所帮助。本文内容目录一览：1、Vue动态路由2、vue-动态路由的实现3、vue动态 ...

    本文将介绍如何vue动态路由配置，以及怎么维修vue动态路由配置指令。同时，我们还将分享一些有关的相关信息，希望对您有所帮助。本文内容目录一览：1、Vue动态路由2、vue-动态路由的实现3、vue动态路由4、vue项目动态路由怎么做5、vue 动态路由/路由权限解决方案Vue动态路由
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个  User  组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在  vue-router  的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：
现在呢，像  /user/foo  和  /user/bar  都将映射到相同的路由。
一个“路径参数”使用冒号  :  标记。当匹配到一个路由时，参数值会被设置到  this.$route.params ，可以在每个组件内使用。于是，我们可以更新  User  的模板，输出当前用户的 ID：
你可以看看这个在线例子。
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到  $route.params  中。例如：
除了  $route.params  外， $route  对象还提供了其它有用的信息，例如， $route.query  (如果 URL 中有查询参数)、 $route.hash  等等。你可以查看  API 文档  的详细说明。
提醒一下，当使用路由参数时，例如从  /user/foo  导航到  /user/bar ，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。吵蔽不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化)  $route  对象：
或者使用 2.2 中引入的  beforeRouteUpdate   导航守卫：
常规参数只会匹配被  /  分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 ( * )：
当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符银旅的路由应该放在最后。路由  { path: '*' }  通常用于客户端 404 错误。如果你使用了 History 模式，请确保正确配置你的服务器。
当使用一个通配符时， $route.params  内会自动添加一个名为  pathMatch  参数。它包含了 URL 通过通配符被匹配的部分：
  vue-router  使用  path-to-regexp  作为路锋碰凳径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的文档学习高阶的路径匹配，还有这个例子  展示  vue-router  怎么使用这类匹配。
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

vue-动态路由的实现
能够传递参数的路由即为动态路由
   应用场景：  从列表页跳转到好肆让详情页
   实现步骤：
   一. 先创建动态路由组件 detail.vue (一级路由组件)
   二、路由配置（router/index.js）
import detail from '@/views/detail.vue'
ath: '/detail/:id'友局等价于  'detail/2'  --2即是传递的id
   id属性名要和detail中雹激接收参数名一致vue动态路由
template
   el-container style="height: 100vh; border: 1px solid #eee"
     el-aside width="200px" style="background-color: rgb(238, 241, 246)"
       !-- :default-openeds="['1', '3']" 表示默认打开第一个和第三个菜单 --
       !-- 1 对应了el-submenu index="1"
            2 对应了el-submenu index="2" --
       !-- el-submenu index="1-1 表示把el-submenu当作是第一个导航的第一个子项--
    陵正念   !--  :router="true 使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 --
       !-- default-active="/index/users" --
       !-- ★  :default-openeds 不可以直接使用['1'] 需要使用一个变量openList代替因为值随时会变如果写的
    清源   是['1'] 那么就永远不会改变会出现点击二级菜单一级菜单会缩起来的情况--
       !-- default-active="/index/users" 表示一进入页面就默认激活/index/user导航菜单
       default-active不能直接写死值路径要用变量代替使用监听器监听路由解决 --
       !-- unique-opened  是否只保持一个子菜单的展开 boolean 默认是false--
       el-menu
         :default-openeds="openList"
         :router="true"
         :default-active="pagepath"
         :unique-opened="true"

         !-- index接收的字符串类型，(i+1)是数字类型，所以使用toString方法转成字符串传给index --
         !-- 因为i是从0开始的所以需要加1 --
         el-submenu
           :index="(i + 1).toString()"
           v-for="(v, i) in navList"
           :key="i"

           template slot="title"
             i class="el-icon-menu"/i{{ v.authName }}/template

           !-- 子选项需要改成例如：1-1格式以字符串的形式传给index属性 --
           !-- 因为子选项也是一个数组所以需要再次循环 --
           !-- :index="'/index/'+item.path" 路径最前面必须加上/ 否则会出现路径覆盖的问题 --
           el-menu-item
             :index="'/index/' + item.path"尺困
             v-for="(item, index) in v.children"
             :key="index"
             {{ item.authName }}/el-menu-item

         /el-submenu
       /el-menu
     /el-aside
     el-container
       el-header style="text-align: right; font-size: 12px"
         el-dropdown
           i class="el-icon-setting" style="margin-right: 15px"/i
           el-dropdown-menu slot="dropdown"
             el-dropdown-item查看/el-dropdown-item
             el-dropdown-item新增/el-dropdown-item
             el-dropdown-item删除/el-dropdown-item
           /el-dropdown-menu
         /el-dropdown
         span王小虎/span
       /el-header
       el-main
         router-view/router-view
       /el-main
     /el-container
   /el-container
/template
script
import axios from "axios";
export default {
   data() {
     return {
       navList: [],
       openList: ["1"],
       pagepath: "/index/users",
     };
   },
   watch: {
     /* 当路由发生变化的时候，就把最新的地址给到pagepath变量
     作用是为了保持路由菜单栏的高亮显示以及解决点击不跳转的bug */
     $route: {
       handler: function (newV) {
         this.pagepath = newV.path;
       },
       immediate: true,
     },
   },
   created: function () {
     this.getNavList();
   },
   methods: {
     getNavList: function () {
       axios
         .get("/mock/menu.json", {
           headers: {
             Authorization: localStorage.token,
           },
         })
         .then((res) = {
           let { data, meta } = res.data;
           /* 数据获取成功 */
           if (meta.status == 200) {
             this.navList = data;
             /* 动态添加路由菜单 */
             /* 因为第一个路由是默认，所以我们从第二个路由开始动态添加 */
             /* slice不会改变原数据而splice会 */
             let arr = this.navList.slice(1,3);
             /* 循环路由数组动态添加路由 */
             arr.forEach(v = {
               /* 我们尽量使用v.children[0].path 原因是我们的路径名用的是子路由的 */
               /* 如果我们直接写死v.children[0].path 会导致只有一个子路由路径被动态添加了
               如果有多个，就无法生效了，所以我们要二次循环v.children,从而实现多个二级子路由
               能够被动态的添加 */
               v.children.forEach(r={
                 this.$router.addRoute("index", {
                   path: r.path,
                   name: r.path,
                   /* 把名字改成我们页面的名称例如CategoriesView.vue */
                   component: () = import(`@/views/${r.path.substring(0,1).toUpperCase()+r.path.substring(1)}View.vue`),
                 });
               })
             });
             console.log(this.$router)
          } else {
             /* 防止数据获取失败，给出相应的后台提示 */
             this.$message.error(meta.msg);
           }
         })
         .catch((err) = {
           console.log(err);
         });
     },
   },
};
/script
style scoped
.el-header {
   background-color: #b3c0d1;
   color: #333;
   line-height: 60px;
}
.el-aside {
   color: #333;
}
/stylevue项目动态路由怎么做
vue项目实现动态路由的方式大体可分为两种:
前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)
   详情可参阅花裤衩大佬的项目手把手...
后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)
这两种方法各有优点，效果都能实现，我们公司是通过第二中种方法实现的，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端不安全(以上的话是公司的后台同学讲的)，那好吧，抱着都试试、锻炼下自己能力的态度，我们搞了第二种方法。
大体步骤：拦截路由-后台取到路由-保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)
菜单名字menName；
   菜单路径menPath；
   菜单指向的资源menuUrl(也就是组件地址, 一般从views层级开始写)
前端登录后通过接口请求拿到菜单数据后，
menName --- name
   menPath --- path
   menuUrl ----components文件
转换时,用到这个此蔽方法找组件资源  把 menuUrl 可以变为components的格式，转为组件文件
生成路由表
可以再过滤一遍生成的路由表
   下面这个方法找到views底下所有的组件资源
路由表里路由的组件在所有组件资源里没找到时，将该路由的path变为/404
getRouter.push({ path: '*', redirect: '/404', hidden: true });
   router.addRoutes(getRouter); //动态添加路由
前置工作：配置项目路由文件，该文件中没有路由，或者存在一部分公共路由，即没有权限的路由
每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的森饥州第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;
   因为可能会有多级菜单，所以会出现children下边嵌套children的情况;
   路由是数组格式
实际前端需要的 component是 component: () = import('@/views/content/classify'),
因为有多级路由的出现，所以要写成遍历递归方法，确保把每个component转成组件对象
   因为后台传回的是字符串，所以要把加载组件的过程封装成一个方法，用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件
   Layout我放的目录跟其他文件的目录不一样，所以我在遍历里单独处理，各位小伙伴可自己调整哈
beforeEach路由拦截，进入判断，如果发现本地没有路由数据，那就利用axios后台取一次，取完以后，利用localStorage存储起来，利用addRoutes动态添加路由，
ps：beforeEach好坏啊，一步小心就进入到了他的死循环，浏览器都tm崩了，得在一开始就加判断，拿到路由了，就直接next()，嘤嘤嘤
   global.antRouter是为了传递数据给左侧菜单组件进行渲染
上边第三步会给 global.antRouter赋值，这是一个全局变量（可以用vuex替代），菜肢李单那边拿到路由，进行渲染vue 动态路由/路由权限解决方案
  路由权限思路：
  1.菜单栏/导航栏(一级权限)
   在登录成功后，获取后端的权限数据, 根据铅扮权限数据，展示对应的路由导航或菜单即可;
  2.界面的控制
   如果用户没有登录, 用户手动在地址栏输入路由地址，则需要跳转到登录界面.
   如果用户已经登录,  用户手动输入的非权限内的路由地址，则给他跳转到404界面.
  3.按钮的搭游控制(二级权限)
   在页面中，有些账号有: 添加，删除，修改，增加等权限, 有些没有.
   没有权限的账号在这个页面只是可以浏览页面中的数据，需要对这些按钮禁用or隐藏。
  4.请求和响应的控制      （这一步其实后端也会根据token判断身份信息, 来返回数据，可以省略）
   如果用户通过非常规的手段(可能是同行), 比如通过浏览器f12将禁用的按钮disabled  改成false, 隐藏的按钮apacity:0改成了1，这些按钮就可以使用了，此时需要对按钮点击后发出的请求作出拦截.
  login.vue
  home.vue (elment-ui)
   侧边导航栏
  store.js
  router.js
  动态路需知激销两个地方调用:
    1 login.vue 中登录成功后立即执行动态路由函数
    2 app.vue中, 在根组件中添加执行动态路由函数，这样每一次用户刷新，就会执行，否则刷新之后，动态路由就没了
  思路3：按钮的控制(二级权限): 这里我是通过自定义指令来实现对按钮(增,删,改等二级权限按钮) 的显示隐藏。
    更简单直接的方式，直接就在html中对button添加v-if显示隐藏即可
    import './utils/permission.js' -- main.js中引入文件, 嫌麻烦直接在main.js中写
  4 服务器返回状态码401, 代表token超时 or token被串改 or 未传token, 此时强制跳转到登录页重新登录
搭建一个良好的无线网络环境，不仅可以让你更好地工作和学习，还可以让你畅快地享受数字化生活。希望本文所介绍的内容可以对你有所帮助。

路过

雷人

握手

鲜花

鸡蛋

收藏分享邀请

		自动登录	找回密码
密码			请使用中文注册

vue动态路由配置

最新评论

相关分类