uniapp使用路由名称跳转

由于web端和app公用一套菜单，而两个项目的路径是不同的，为解决这个问题，封装了一套使用路由名称作为跳转路由的方法

1.在pages.json文件里pages对应的页面配置里添加 routeName 字段（自定义），我做的app里面的菜单是后台获取的，所以这里的value值对应的是后台返回的页面路由

2.开始封装函数

创建route文件夹，在里面创建index.js和router.js

(1).router.js是为了获取page.json里面的路由，里面内容如下：

const defaultPages = require('@/pages.json')
const {
    pages,
} = defaultPages.default

function getRouters() {
    const _routes = {}
    pages.forEach(item => {
        _routes[item.routeName] = `/${item.path}`
    })
    
    return _routes
}

export default getRouters()

(2).在index.js文件里引入router.js，拿到路由集合实现跳转，index.js里面的代码如下：

import routers from './router';

/**
 * 路由跳转
 * @param name 页面路由名称
 * @param type 跳转方式
 * @param params 携带参数
 * @param delta 页面返回层级，仅 type='navigateBack' || type='back' 时生效
 */
function customRoute(config) {
    let _routeName = typeof config === 'string' ? config : config.name
    let _params = typeof config === 'string' ? {} : config.params || {}
    let _type = typeof config === 'string' ? 'navigateTo' : config.type || 'navigateTo'
    let _url = routers[_routeName]

    if (_type === 'navigateTo' || _type === 'to') {
        uni.navigateTo({ url: _url })
    }
    if (_type === 'redirectTo' || _type === 'redirect') {
        uni.redirectTo({ url: _url })
    }
    if (_type === 'switchTab' || _type === 'tab') {
        uni.switchTab({ url: _url })
    }
    if (_type === 'reLaunch' || _type === 'launch') {
        uni.reLaunch({ url: _url })
    }
    if (_type === 'navigateBack' || _type === 'back') {
        uni.navigateBack({ delta: _params.delta || 1 })
    }
}

export default customRoute

3.在main.js里面挂载到Vue实例

import customRoute from '@/route'
Vue.prototype.$routeTo = customRoute

跳转方式：我这里是获取到的地址

this.$routeTo(item.url)

玄机博客

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。