2024年03月28日 建站教程
在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>
本文链接：http://so.lmcjl.com/news/558/