前端开发框架
当前页

路由 ​

文件路由说明 ​

采用vite-plugin-pages插件使用文件系统配置相关路由

  • 基于文件自动路由
  • 读取views/xx/pages下的文件得到路由
  • 路由规则如下：vite.config.ts配置(后边的业务开发章节也会讲到文件路由规则)
Pages({
        dirs: [
          { dir: dir, baseRoute: '' },
          { dir: 'src/views/sys', baseRoute: '' },
          // { dir: 'src/views/dashboard', baseRoute: '/dashboard' },
        ],
        extensions: ['vue'],
        extendRoute: (route) => {
          // 优先以 dirs中的处理为主
          // /upms/account /upms/audit-log
          // 如：{ dir: 'src/views/dashboard', baseRoute: '/dashboard' } 则 以views/dashboard下的index.vue作为 /dashboard路由前缀
          // 给路由添加前缀， 如src/views/upms/pages/abc/index.vue的文件路由， 路由 /abc 转化为 /upms/abc
          const excludList = ['examples']; // 跳过， src/views/examples/pages/abc/index.vue的路由还是 /abc
          const result = route.component.match(dirReg);
          if (result) {
            if (!excludList.includes(result[1])) {
              if (route.path === '/') {
                route.path = `/${result[1]}`;
              } else {
                route.path = `/${result[1]}${route.path}`;
              }
            }
          }
          return {
            ...route,
          };
        },
      })

如何修改路由属性 ​

默认路由属性 ​
  • 以 views/xx/pages/aa/index.vue文件为例
    • path: '/xx/aa'
    • name: 'aa'
  • 以 views/xx/pages/aa/ViewLog.vue文件为例
    • path: /xx/aa/ViewLog
    • name: 'aa-ViewLog'
配置路由属性 ​

可以通过vite-plugin-pages插件的功能修改路由属性，如下：

vue
<script>
// 一个vue文件中只能存在一个<route></route>
// 以 views/xx/pages/aa/ViewLog.vue文件为例
// 1 没有<route>配置
//  - path: '/xx/aa/ViewLog'
//  - name: 'aa-ViewLog'
// 2 配置如下<route>
//  - path: '/abcd'
//  - name: 'PageDept'
</script>

<route lang="yaml">
name: PageDept
path: /abcd
meta: 
  a: xxx
  b: bbb
</route>
路由跳转携带参数 ​
ts
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
function go() {
    console.log('route', route);
    router.push({ path: '/upms/dept', query: { id: '111' }, params: { id1: '222' } });
    // path跳转时 query会携带到url中，
    // 获取属性：route.query => { id: '111' } route.params => {}
    router.push({ name: 'dept', query: { id: '111' }, params: { id1: '222' } });
    // name跳转时 query会携带到url中，
    // 获取属性：route.query => { id: '111' } route.params => { id1: '222' }
}

匹配动态地址 ​

步骤： 以访问 /upms/dept/1234 /upms/dept/5678 路由为例

  • 1）添加文件 /upms/dept/[id].vue => path: /upms/dept/:id
  • 2）添加菜单 /upms/dept/:id