使用uni-simple-router必看注意事项 #3

SilurianYang · 2019-08-09T03:05:06Z

相关报错指南

大家有啥问题可以直接在下面提出，到时候会统一记录到上面来

1.未实例化直接使用

解决方法

完整的使用示例

import Vue from 'vue'
import Router from 'uni-simple-router';
Vue.use(Router);
const router = new Router({
	routes: [{
			path: "/pages/tabbar/tabbar-1/tabbar-1",
			name: 'tabbar-1'
		},
	]
});

2.未注册路由直接使用

解决方法

你应该在实例化时注册所需路由，否则就会报路由无法找到的问题。譬如当前路径为:http://192.168.1.160:8080/#/pages/tabbar/tabbar-2/tabbar-2 实例化Router时必须注册。注意http://192.168.1.160:8080/#/ 地址呈现这样时，实际为你page.json中第一个路径。你也必须注册！

import Vue from 'vue'
import Router from 'uni-simple-router';
Vue.use(Router);
const router = new Router({
	routes: [{
			path: "/pages/tabbar/tabbar-2/tabbar-2",
			name: 'tabbar-2'
		},
               {
			path: "/pages/tabbar/tabbar-1/tabbar-1",
			name: 'tabbar-1'
		}
	]
});

jun-qi · 2019-08-09T03:42:48Z

good

xxdhm007 · 2019-08-15T03:13:09Z

使用vue cli 开发的添加后出现这个错误关闭小程序 es6转es5 后小程序页面可以工作但是不能浏览和真机调试。出现

SilurianYang · 2019-08-15T03:16:06Z

@xxdhm007 很抱歉我不建议是在使用uni-app时使用脚手架初始化项目换成最新版hx初始化项目即可

xxdhm007 · 2019-08-15T03:38:23Z

嗯好的呢 🙏

pppshiwen · 2019-08-21T04:05:58Z

无论使用vue cli 还是使用 hx 来使用，都报这个错

disapand · 2019-08-23T09:58:29Z

无论使用vue cli 还是使用 hx 来使用，都报这个错

同样遇到这个问题，刚开始正确的，忘了后边改了什么，就出现这个错误，文件全部删除，重新按照文档来了一次依旧报这个错

SilurianYang · 2019-08-23T10:01:18Z

无论使用vue cli 还是使用 hx 来使用，都报这个错

同样遇到这个问题，刚开始正确的，忘了后边改了什么，就出现这个错误，文件全部删除，重新按照文档来了一次依旧报这个错

你楼上那哥们已经解决了，是在初始化的时候你需要在注册路由时把，路径配置进去

slixina · 2019-09-04T14:17:33Z

这个路由可以突破uniapp的最多5层路由限制吗

SilurianYang · 2019-09-05T03:11:23Z

这个路由可以突破uniapp的最多5层路由限制吗

5层是小程序的没有办法啦。除非你去修改小程序底层代码，我觉得这个不太可能。其次就是 5层已经很多了，在实际的开发中根本就用不到5层。跳转到指定深度的页面中你应该是关闭掉一些页面。从而直接返回到最开始的页面这个即保证了性能也提高了用户体验

LiangFuzhi · 2019-09-17T03:49:38Z

小程序报错

SilurianYang · 2019-09-17T03:53:13Z

@LiangFuzhi 你这是脚手架初始化的项目吧？

如使用vue-cli创建的uni-app项目,需要在`vue.config.js`文件的`transpileDependencies`配置项中加上`uni-simple-router`,详见vue-cli3.x文档

jun-qi · 2019-09-17T04:02:27Z

这个邮件抄送了多少个人啦,(捂脸),作者在文档说明里说明一下多好,我以为一开始就我自己不会引入呢,原来还有很多人都一样,哈哈哈

…

------------------ 原始邮件 ------------------ 发件人: "hhyang"<[email protected]>; 发送时间: 2019年9月17日(星期二) 中午11:53 收件人: "SilurianYang/uni-simple-router"<[email protected]>; 抄送: "冯一琦"<[email protected]>;"Comment"<[email protected]>; 主题: Re: [SilurianYang/uni-simple-router] 使用uni-simple-router必看注意事项 (#3) @LiangFuzhi 你这是脚手架初始化的项目吧？如使用vue-cli创建的uni-app项目,需要在vue.config.js文件的transpileDependencies配置项中加上uni-simple-router,详见vue-cli3.x文档 — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

LiangFuzhi · 2019-09-17T04:02:51Z

是用脚手架初始化的

配置了transpileDependencies了，报新的错

SilurianYang · 2019-09-17T04:29:30Z

@LiangFuzhi 需要进行实例化加qq群769241495

D-smallsix · 2019-10-31T08:10:06Z

@SilurianYang

D-smallsix · 2019-10-31T08:10:45Z

请教个问题。基于typescript 构建，引入后报错

2282747917 · 2019-12-10T07:22:36Z

报这个错怎么解决

SilurianYang · 2019-12-10T07:25:05Z

@2282747917 看起来你这个好像是小程序啊？ H5的代码怎么跑到小程序了？认真看

快速上手

BigFly2333 · 2019-12-13T03:56:06Z

@2282747917 看起来你这个好像是小程序啊？ H5的代码怎么跑到小程序了？认真看

快速上手

我也同样遇到了上述报错，是在微信小程序中
main.js

import Vue from 'vue'
import App from './App'
import router from './router/index'
import { RouterMount } from 'uni-simple-router'
Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
RouterMount(app,'#app')
app.$mount()

router.js

import Vue from 'vue'
import Router from 'uni-simple-router'

Vue.use(Router)

const router = new Router({
    routes: [
      {
        // path必须跟pages.json中的地址对应
        path: '/pages/index/index',
        aliasPath:'/',  //对于h5端你必须在首页加上aliasPath并设置为/
        name: 'home',
        meta: {
          title: '首页'
        }
      },
      {
        path: '/pages/store/index',
        aliasPath:'/',
        name: 'store',
        meta: {
          title: '门店选择'
        }
      }
    ]
});

// 全局路由前置守卫
router.beforeEach((to, from, next) => {
  next()
})

// 全局路由后置守卫
router.afterEach((to, from) => {
})

export default router

SilurianYang · 2019-12-13T04:03:35Z

@BigFly2333 因为你根本就没有仔细看文档或许这样颜色的加深也挡不住高度近视的问题

BigFly2333 · 2019-12-13T04:16:30Z

@SilurianYang
之前代码是写错了。。
但是我改成下面的代码之后还是一样的报错

import Vue from 'vue'
import App from './App'
import router from './router/index'
Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

SilurianYang · 2019-12-13T04:18:21Z

@BigFly2333 最好使用npm 安装插件市场我有时会漏更

BigFly2333 · 2019-12-13T04:21:02Z

@SilurianYang
是使用的npm装的

"uni-simple-router": "^1.3.81"

上传不了图片好麻烦。。。。

这个是pages.json的配置

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"usingComponents": {
					"van-toast": "/wxcomponents/vant-weapp/toast/index",
					"van-button": "/wxcomponents/vant-weapp/button/index"
				}
			}
		},
		{
			"path": "pages/store/index",
			"style": {
				"navigationBarTitleText": "门店选择",
				"usingComponents": {
					"van-button": "/wxcomponents/vant-weapp/button/index"
				}
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

SilurianYang · 2019-12-13T04:23:47Z

@BigFly2333 你加群吧这个所有人都会广播别人不想接收的

769241495

willbb · 2019-12-20T02:34:39Z

SilurianYang · 2019-12-20T02:38:45Z

@willbb

第一 use完成后请不要重复use

第二 uni模式下$Rourer 非 $router $Route非$route

willbb · 2019-12-21T07:48:47Z

@SilurianYang
按照你的说第一点把重复use的去掉了，只要加上了全局路由守卫，无论是前置还是后置，依然会报同样的错误



我是重新构建了一个hello-app 的模板代码，最新的uni-app版本，按照官方文档一步一步接入uni-simple-router，还是有这个错误

SilurianYang · 2019-12-21T07:50:57Z

@willbb 脚手架项目？看文档

willbb · 2019-12-21T08:05:33Z

@SilurianYang 是的，使用vue cli 3.0 创建，uni-app提供的命令 vue create -p dcloudio/uni-preset-vue my-project

下面是创建的项目结构（router的目录是根据simple-router官方文档做的），并没有看见vue-config.js

现在问题在于把全局守卫代码去掉就能正常跳转，增加全局守卫代码就会报错

willbb · 2019-12-21T08:09:48Z

@SilurianYang 我把版本号降到1.2.5，就没有问题

SilurianYang · 2019-12-21T08:10:24Z

@willbb 没有 vue-config.js 就自己新建一个还有请不要在这里反复的发问这里会广播所有人！你应该单独开issue 这个好像是你的吧注册全局路由前置守卫跳转失败

AnsonCode · 2020-03-02T03:08:40Z

1/导航被触发。

2/H5端：调用全局的 beforeEach 守卫、其他端：非 $Router 进行跳转的先加载页面再触发 beforeEach，使用 $Router API 进行跳转的则和 H5端同理。
问题：### 请问在小程序端，进入首页时，如何先执行beforeEach，再加载页面呢？

3/在路由配置里调用 beforeEnter。

4/导航被确认。

5/用全局的 afterEach 钩子。

6/触发 DOM 更新

SilurianYang · 2020-03-02T03:21:23Z

@caoyanbin1993 小程序不等同于H5 小程序已经固定好入口文件了新版路由已经代理了首页的生命周期，只不过页面会显示出来。在小程序端你应该这样做如果有权限需要验证登录，你可以在pages.json 中针对小程序新增一个空白页面来做过度界面。等待判断完成后再显示正真的首页。

AnsonCode · 2020-03-02T03:26:56Z

@SilurianYang 感谢，可以增加空白页，然后在空白页做个启动图标。

AnsonCode · 2020-03-02T06:20:02Z

@SilurianYang 运行代码到安卓设备，报错：TypeError: undefined is not an object (evaluating '__uniConfig.appLaunchInfo.path')
刚刚查了几个解答文章：
https://ask.dcloud.net.cn/question/75864
要点：路径问题？
问题：我用的是加载page.json的方式，不知道如何搞？

https://ask.dcloud.net.cn/question/88779
要点:是uni-simple-router插件导致的报错，关闭V3编译器
问题：ruhe 关闭V3呢？

SilurianYang · 2020-03-02T06:26:49Z

@caoyanbin1993 有问题自己开贴不要在这里回复会抄送给所有人如何关闭v3

qiqingfu · 2020-04-10T06:04:57Z

群号多少?

SilurianYang · 2020-04-10T07:22:59Z

@qiqingfu # 769241495

bbzhengcheng · 2020-05-15T07:47:51Z

@BigFly2333 因为你根本就没有仔细看文档或许这样颜色的加深也挡不住高度近视的问题

我是快眼瞎那种，唉~

DazhiFe · 2020-10-20T06:46:37Z

地址栏直接访问首页路径：localhost:8080/pages/index/index，会是空白的，访问localhost:8080可以正常显示，是什么问题呢？

lilei03 · 2020-10-21T09:19:53Z

@DazhiFe 你是H5端调试吧？应该是配置了aliasPath的原因，我发现配置了别名之后就只能用别名路径访问，不能用原始路径访问。我用原生tabbar进行页面切换也碰到这个问题，配了别名的就显示空白，去掉别名就好了。

SilurianYang · 2020-10-21T09:24:14Z

@lilei03 你可以看下这个 http://hhyang.cn/src/router/tutorial/ljTabbar.html

SilurianYang · 2020-10-21T09:26:31Z

@DazhiFe 这个是现版本的问题，首页限制为只能通过 / 访问。如果你想 /pages/index/index 也能访问，你可以这样通过 * 通配符重定向到 / 就好了

tenlisen · 2020-12-17T01:52:36Z

Router.back()可以添加返回刷新功能吗

zfowed · 2020-12-17T09:33:01Z

现在我在页面组件的 computed onLoad created 的生命周期调用 this.$Route 就会报以下错误，mounted 不会。

dongjiayun · 2021-08-13T09:27:39Z

chunk-vendors.js:95515 Uncaught TypeError: Cannot read property 'replace' of null
at t.RouterMount (chunk-vendors.js:95515)
at eval (main.ts:25)
at Object../src/main.ts (index.js:1494)
at webpack_require (index.js:854)
at fn (index.js:151)
at Object.1 (index.js:1732)
at webpack_require (index.js:854)
at checkDeferredModules (index.js:46)
at index.js:994
at index.js:997

请问这个错怎么解决

huaigit · 2021-08-23T07:32:33Z

index.js:37 Uncaught ReferenceError: ROUTES is not defined at eval (index.js:37) at Object.G:\work\uView_zhuanqianhua\shopro\router\index.js (index.js:1442) at __webpack_require__ (index.js:854) at fn (index.js:151) at eval (main.js:9) at Object.G:\work\uView_zhuanqianhua\main.js (index.js:1219) at __webpack_require__ (index.js:854) at fn (index.js:151) at Object.1 (index.js:1132) at __webpack_require__ (index.js:854)

huaigit · 2021-08-23T07:33:31Z

routes: [...ROUTES,

oyai32 · 2021-12-07T06:52:46Z

命名为 $Router 而不是 $router，是因为叫 $router 会报错是吗

tieniu1 · 2022-08-22T13:15:18Z

index.js:37 Uncaught ReferenceError: ROUTES is not defined at eval (index.js:37) at Object.G:\work\uView_zhuanqianhua\shopro\router\index.js (index.js:1442) at __webpack_require__ (index.js:854) at fn (index.js:151) at eval (main.js:9) at Object.G:\work\uView_zhuanqianhua\main.js (index.js:1219) at __webpack_require__ (index.js:854) at fn (index.js:151) at Object.1 (index.js:1132) at __webpack_require__ (index.js:854)

ImmerTry · 2024-06-21T06:16:23Z

routes: [...ROUTES,

解决了么

ImmerTry · 2024-06-21T06:20:24Z

index.js:37 Uncaught ReferenceError: ROUTES is not defined at eval (index.js:37) at Object.G:\work\uView_zhuanqianhua\shopro\router\index.js (index.js:1442) at __webpack_require__ (index.js:854) at fn (index.js:151) at eval (main.js:9) at Object.G:\work\uView_zhuanqianhua\main.js (index.js:1219) at __webpack_require__ (index.js:854) at fn (index.js:151) at Object.1 (index.js:1132) at __webpack_require__ (index.js:854)

你这个是v3还是v2的哇

SilurianYang self-assigned this Aug 9, 2019

SilurianYang added the documentation Improvements or additions to documentation label Aug 9, 2019

SilurianYang pinned this issue Aug 9, 2019

使用uni-simple-router必看注意事项 #3

使用uni-simple-router必看注意事项 #3

Comments

SilurianYang commented Aug 9, 2019 • edited Loading

相关报错指南

1.未实例化直接使用

解决方法

相关测试案例

完整的使用示例

2.未注册路由直接使用

解决方法

jun-qi commented Aug 9, 2019

xxdhm007 commented Aug 15, 2019

SilurianYang commented Aug 15, 2019

xxdhm007 commented Aug 15, 2019

pppshiwen commented Aug 21, 2019

disapand commented Aug 23, 2019

SilurianYang commented Aug 23, 2019

slixina commented Sep 4, 2019

SilurianYang commented Sep 5, 2019

LiangFuzhi commented Sep 17, 2019

SilurianYang commented Sep 17, 2019

如使用vue-cli创建的uni-app项目,需要在vue.config.js文件的transpileDependencies配置项中加上uni-simple-router,详见vue-cli3.x文档

jun-qi commented Sep 17, 2019 via email

LiangFuzhi commented Sep 17, 2019

SilurianYang commented Sep 17, 2019

D-smallsix commented Oct 31, 2019

D-smallsix commented Oct 31, 2019

2282747917 commented Dec 10, 2019

SilurianYang commented Dec 10, 2019

快速上手

BigFly2333 commented Dec 13, 2019

快速上手

SilurianYang commented Dec 13, 2019

BigFly2333 commented Dec 13, 2019 • edited Loading

SilurianYang commented Dec 13, 2019

BigFly2333 commented Dec 13, 2019 • edited Loading

SilurianYang commented Dec 13, 2019 • edited Loading

769241495

willbb commented Dec 20, 2019

SilurianYang commented Dec 20, 2019

第一 use完成后请不要重复use

第二 uni模式下$Rourer 非 $router $Route非$route

willbb commented Dec 21, 2019

SilurianYang commented Dec 21, 2019

willbb commented Dec 21, 2019

willbb commented Dec 21, 2019

SilurianYang commented Dec 21, 2019

AnsonCode commented Mar 2, 2020

SilurianYang commented Mar 2, 2020

AnsonCode commented Mar 2, 2020

AnsonCode commented Mar 2, 2020

SilurianYang commented Mar 2, 2020

qiqingfu commented Apr 10, 2020

SilurianYang commented Apr 10, 2020

bbzhengcheng commented May 15, 2020

DazhiFe commented Oct 20, 2020

lilei03 commented Oct 21, 2020

SilurianYang commented Oct 21, 2020

SilurianYang commented Oct 21, 2020

tenlisen commented Dec 17, 2020

zfowed commented Dec 17, 2020 • edited Loading

dongjiayun commented Aug 13, 2021

huaigit commented Aug 23, 2021

huaigit commented Aug 23, 2021

oyai32 commented Dec 7, 2021

tieniu1 commented Aug 22, 2022

ImmerTry commented Jun 21, 2024

ImmerTry commented Jun 21, 2024

SilurianYang commented Aug 9, 2019 •

edited

Loading

如使用vue-cli创建的uni-app项目,需要在`vue.config.js`文件的`transpileDependencies`配置项中加上`uni-simple-router`,详见vue-cli3.x文档

BigFly2333 commented Dec 13, 2019 •

edited

Loading

BigFly2333 commented Dec 13, 2019 •

edited

Loading

SilurianYang commented Dec 13, 2019 •

edited

Loading

zfowed commented Dec 17, 2020 •

edited

Loading