Vue动态路由还能这么玩？太方便了

大风写全栈

发布于 2025-02-19 23:31:27

10300

代码可运行

文章被收录于专栏：锤子代码锤子代码

运行总次数：0

代码可运行

几十个页面

如题，项目中大概有几十个页面。基本都属于那种模板页面，一个一个注册路由太麻烦了。

还是想个简单的办法。

通过url参数将页面名称带过来，前端处理之后，直接就可以访问。

岂不是太方便了？

简单几步实现

1. 先定义一个通用的跳转模板

<!-- @/views/TemplateWrapper.vue -->
<template>
  <div>
    <component :is="component" v-if="component"></component>
    <p v-else>组件加载中...</p>
  </div>
</template>

<script>
import {defineAsyncComponent, ref, watch} from 'vue';
import {useRoute} from 'vue-router';

export default {
  name: 'TemplateWrapper',
  props: {
    templateName: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const route = useRoute();
    const component = ref(null);

    const loadComponent = () => {
      const componentName = props.templateName;
      try {
        component.value = defineAsyncComponent(() =>
            import(`@/views/template/${componentName}.vue`)
        );
      } catch (error) {
        component.value = defineAsyncComponent(() =>
            import(`@/views/error/404.vue`));
      }
    };

    loadComponent();

    watch(
        () => route.params.templateName,
        () => {
          loadComponent();
        }
    );

    return {
      component
    };
  }
};
</script>

<style scoped>
</style>

2. 路由规则编写

export const staticRoutes: RouteRecordRaw[] = [
    {
        path: '/',
        component: () => import('@/views/home/index.vue'),
        children: [],
    },
    {
        path: '/template/:templateName',
        name: 'Template',
        component: () => import('@/views/TemplateWrapper.vue'),
        props: true
    },
]

/template/:templateName就是我定义的路由规则。

访问方式是：

http://localhost:8081/#/template/c0001

其中的c0001对应的文件是：

/views/template/c0001.vue

大功告成~

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2025-02-13，如有侵权请联系 cloudcommunity@tencent.com 删除

import