uniapp语法如何动态配置路由信息

在uniapp中，路由信息的配置对于用户界面的导航和页面关联至关重要。通常情况下，路由信息是静态配置的，即在项目启动时就已经确定。然而，有时根据业务需求，我们可能需要动态地配置路由信息。下面给大家简单介绍一下！

1、创建动态路由配置文件

export default [
  {
    path: '/home',
    name: 'home',
    component: () => import('@/pages/home/index.vue'),
    meta: {
      title: '首页',
      icon: 'home'
    }
  },
  {
    path: '/list',
    name: 'list',
    component: () => import('@/pages/list/index.vue'),
    meta: {
      title: '列表',
      icon: 'info'
    }
  },
  // ... 其他路由配置
]

2、动态注册路由

import Vue from 'vue'
import App from './App'
import dynamicRoutes from './dynamicRoutes'
 
// 动态注册路由
dynamicRoutes.forEach(route => {
  router.addRoute(route)
})
 
Vue.config.productionTip = false
 
App.mpType = 'app'
 
const app = new Vue({
  ...App
})
app.$mount()

3、使用动态配置的路由信息

<template>
  <view>
    <text>{{ route.meta.title }}</text>
  </view>
</template>

<script>
export default {
  onLoad() {
    // 获取当前页面路由对象
    const route = getCurrentPages()[getCurrentPages().length - 1].$route
    console.log(route.meta.title)
  }
}
</script>