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

[SilurianYang]

相关报错指南

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

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]

good

[xxdhm007]

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

[SilurianYang]

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

[xxdhm007]

嗯 好的 呢 🙏

[pppshiwen]

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

[disapand]

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

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

[SilurianYang]

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

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

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

[slixina]

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

[SilurianYang]

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

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

[LiangFuzhi]

小程序报错

[SilurianYang]

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

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

[jun-qi]

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

------------------ 原始邮件 ------------------ 发件人: "hhyang"notifications@github.com; 发送时间: 2019年9月17日(星期二) 中午11:53 收件人: "SilurianYang/uni-simple-router"uni-simple-router@noreply.github.com; 抄送: "冯一琦"qi0801@qq.com;"Comment"comment@noreply.github.com; 主题: 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]

是用脚手架初始化的 配置了transpileDependencies了，报新的错

[SilurianYang]

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

[D-smallsix]

@SilurianYang

[D-smallsix]

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

[2282747917]

报这个错怎么解决

[SilurianYang]

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

快速上手

[BigFly2333]

@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]

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

[BigFly2333]

@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]

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

[BigFly2333]

@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]

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

769241495

[willbb]

[SilurianYang]

@willbb

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

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

[willbb]

@SilurianYang 按照你的说第一点把重复use的去掉了，只要加上了全局路由守卫，无论是前置还是后置，依然会报同样的错误 我是重新构建了一个hello-app 的模板代码，最新的uni-app版本，按照官方文档一步一步接入uni-simple-router，还是有这个错误

[SilurianYang]

@willbb 脚手架项目？ 看文档

[willbb]

@SilurianYang 是的，使用vue cli 3.0 创建，uni-app提供的命令 vue create -p dcloudio/uni-preset-vue my-project 下面是创建的项目结构（router的目录是根据simple-router官方文档做的），并没有看见vue-config.js 现在问题在于把全局守卫代码去掉就能正常跳转，增加全局守卫代码就会报错

[willbb]

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

[SilurianYang]

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

[AnsonCode]

1/导航被触发。

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

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

4/导航被确认。

5/用全局的 afterEach 钩子。

6/触发 DOM 更新

[SilurianYang]

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

[AnsonCode]

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

[AnsonCode]

@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]

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

[qiqingfu]

群号多少?

[SilurianYang]

@qiqingfu # 769241495

[bbzhengcheng]

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

我是快眼瞎那种，唉~

[DazhiFe]

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

[lilei03]

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

[SilurianYang]

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

[SilurianYang]

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

[tenlisen]

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

[zfowed]

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

[dongjiayun]

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]

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]

routes: [...ROUTES,

[oyai32]

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

[tieniu1]

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)