Vue中实现动态路由

展示效果：

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