首页 > 其他分享 >uni-simple-router使用

uni-simple-router使用

时间:2022-10-10 17:46:53浏览次数:26  
标签:Vue const simple app js router uni

一.安装路由:

npm install uni-simple-router
npm install uni-read-pages

 

二.配置路由:

1.根目录新建router.js:

// router.js
import {RouterMount,createRouter} from 'uni-simple-router';

const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM,  
    routes: [...ROUTES]
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
    next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
    console.log('跳转结束')
})

export {
    router,
    RouterMount
}

2.配置main.js

// main.js

import Vue from 'vue'
import App from './App'
import {router,RouterMount} from '@/router.js'
Vue.use(router)

App.mpType = 'app'
const app = new Vue({
    ...App
})

RouterMount(app,router,'#app')
app.$mount(); 

3.配置vue.config.js

//vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                ROUTES: webpack.DefinePlugin.runtimeValue(() => {
                    const tfPages = new TransformPages({
                        includes: ['path', 'name', 'aliasPath']
                    });
                    return JSON.stringify(tfPages.routes)
                }, true )
            })
        ]
    }
}

 三、注意事项

1、报错:Cannot read properties of null (reading 'replace')

在main.js里的

Vue.use(router)
要放在
const app = new Vue({
    ...App
})
之前

标签:Vue,const,simple,app,js,router,uni
From: https://www.cnblogs.com/helloStone/p/16776572.html

相关文章

  • 2022-10-10 wepy $invoke 转 uniapp
    以前的wepy小程序项目的代码要转换成uniapp+vue项目,其中wepy的$invoke(一个可以在一个页面调用另一个页面组件的方法),放在vue中该如何实现?解决方案:例:this.$invoke("Searc......
  • 记录--有关uni-app如何实现路由拦截的知识分享
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言随着业务的需求,项目需要支持H5、各类小程序以及IOS和Android,这就需要涉及到跨端技术,不然每一端都开......
  • MobPush Android For Unity
    集成准备注册账号使用MobSDK之前,需要先在MobTech官网注册开发者账号,并获取MobTech提供的AppKey和AppSecret,详情可以​​点击查看注册流程​​下载MobPush对应的.unitypackag......
  • 解决Unity打包后Timeline里部分特效没显示的bug
    问题描述比较诡异的问题,美术同学给过来的特效资源,在Edtior里是正常播放的,但打包后特效里应该落下来的光柱却消失了。问题分析考虑到打包后的环境和Editor环境的区别As......
  • 说说React-Router底层实现?-面试进阶
    React-Router基本了解对于React-Router是针对React定义的路由库,用于将URL和component进行匹配。React-Router源码分析简单前端路由的实现<!DOCTYPEhtml><htmllang="......
  • 上传多张图片的布局 flex布局 uniapp
    1<viewclass="input"style="display:flex;">2<spanclass="title"style="font—size:16px;">图像信息:</span>3<viewclas......
  • uniapp 实现回退监听 弹出提示 小程序与H5已解决
    H5小程序<!--退出填写提示框--><view>自定义提示框<viewv-if="outTipsShow"></view></view>//退出填写提示框......
  • Overseas Chinese Community All In One
    Well-knownOverseasChineseCommunityAllInOne知名海外华人社区汇总一亩三分地社区:留学|申请|求职|移民|生活-高信噪比+纯干货北美最有影响力的华人社区......
  • git diff与linux diff的输出格式之unified format
    gitdiff与linuxdiff的输出格式之unifiedformat【转】  前言前面有一篇文章《一个有些意思的项目--文件夹对比工具(一)》,里面简单讲了下diff算法之--Myers算法......
  • 使用uni-app开发(h5、小程序、app)步骤
    uni-app介绍​​uni-app​​​是一个使用​​Vue.js​​开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/......