Vue中实现动态路由

动态路由设置一般有两种：简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用1、简单的角色路由设置（1）配置项目路由权限// router.jsimport Vue from 'vue'import Router from 'vue-router'import Lay

YaaLee_

12738人浏览 · 2021-07-18 21:12:25

YaaLee_ · 2021-07-18 21:12:25 发布

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

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,
      });
    },
  },
};