📄 前端动态路由管理

适用场景

点击页面上的按钮可以打开新的 Tagsview 标签页，同时也可以传递参数。

以下是一个适用场景的例子，当点击“新增文章”按钮时，会打开一个新的发布文章页面，方便进行操作。

代码实现方式

① 菜单管理中定义隐藏菜单

注意为角色分配该菜单的权限。

② 点击目标按钮触发路由跳转

const click = () => {
  router.push({
    path: "/app/appArticle/form",
    query: { tagsViewName: "动态路由测试", param1: "123" },
  });
};

③ 在跳转的页面获取请求参数

const route = useRoute();

onMounted(() => {
  console.log(route.query.tagsViewName);
  console.log(route.query.param1);
});

菜单参数方式

在多个菜单中引用同一个路由下的组件，通过路由进行区分。

① 配置菜单 （带参）

指向 /admin/test/index 组件

AAA /admin/test/1

BBB /admin/test/2

② 页面获取参数

• admin/test/index.vue

const route = useRoute();

onMounted(() => {
  // test/index/参数
  const parts = route.path.split("/");
  const lastParam = parts[parts.length - 1];
  console.log(lastParam);
});