序言

今天重新构建了一个Vue3+vite的项目，在配置路由需要根据后端传来的路由动态显示我们的导航栏，今天学习了vue3的动态路由配置

Vue-router

首先配置我们正常的路由地址

import layout from '../layout/index.vue'
const routes = [
    {
        path: "/",
        component: layout,
        children: [
          {path: '/charge/TimelyMeterReading', component: ()=>import("../src/view/charge_management/timelyMeterReading.vue")},
          {path: '/charge/BlockMeterReading', component: ()=>import("../src/view/charge_management/blockMeterReading.vue")}
        ],
    },
];

首先是配置layout为默认路径，所有页面都在layout之中显示的，其他的路由为其子路由

改为动态路由

//渲染导航的数据
{
  routerName: '收费管理',
  index: '1',
  icon: 'Notebook',
  children: [
    {
      routerName: '即时抄表',
      index: '1-1',
      routers: '/charge/TimelyMeterReading',
      component:'../view/charge_management/timelyMeterReading.vue'
    },
    {
      routerName: '分组抄表',
      index: '1-2',
      routers: '/charge/BlockMeterReading'
      component: '../src/view/charge_management/blockMeterReading.vue'
    }
  ]
},

将获取到数据通过addRouter()如下添加到路由中

//添加到路由中
<script lang="ts" setup>
import {useRouter} from 'vue-router';
import {onMounted} from 'vue';
import layout from './layout/index.vue';

const Router = useRouter()
onMounted(()=>{
  Router.addRoute(
      {
        path: "/",
        component: layout,
        children: [
          {path: '/charge/TimelyMeterReading', component: ()=>import("../src/view/charge_management/timelyMeterReading.vue")},
          {path: '/charge/BlockMeterReading', component: ()=>import("../src/view/charge_management/blockMeterReading.vue")}
        ],
      },
  )
})
</script>


//router/index.ts
const routes = [
    {
        path: "/",
        component: layout,
        children: [
            {
                path: "/charge/:name",
                component: () => import("../src/view/charge_management/timelyMeterReading.vue"),
            },
        ],
    },
];

问题

经过上面的步骤，现在我们点击导航是发现路由已经可以跳转了，但是在刷新时出现的页面不不正确，我们需要创建一个redirect.vue重定向我们点击组件

//redirect.vue
<script lang="ts" setup>
import {useRouter} from 'vue-router';
import {onMounted} from 'vue';
const Router = useRouter()
onMounted(()=>{
  Router.replace(Router.currentRoute.value.fullPath)
})
</script>