完美的配置 | uni-simple-router

# 完美的配置

编译到app时，如果你的首页是 nvue？请把他换成vue。同时你需要在manifest.json 下把 App常用其他设置 中的 fast启动模式 关闭掉。打开源码视图对比以下配置：

// 在源码视图下的 app-plus 节点下
"splashscreen" : {
    "alwaysShowBeforeRender" : false,
    "waiting" : true,
    "autoclose" : false,
    "delay" : 0
}

1
2
3
4
5
6
7

# nvue启动页

nvue 不能直接作为启动页面。因为在启动时 uni-app 会检测启动页面是否为原生渲染，原生渲染时不会执行路由跳转，插件无法正确捕捉页面挂载。此时我们依旧使用普通 webview 挂载页面，变通方案如下：

// 页面目录
pages
    |--nvueTab1
    |   |--index.nvue
    |--nvueTab2
    |   |--index.nvue
    |--main.vue

// pages.json
{
    "pages": [ 
        // #ifdef APP-PLUS
        {
            "path": "pages/main"
        },
        // #endif
        {
            "path" : "pages/nvueTab1/index",
            "name":"nvueTab1"
        },
        {
            "path" : "pages/nvueTab2/index",
            "name":"nvueTab2"
        }
    ]
}

// main.vue
<template></template>
<script></script>
<style></style>

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

const routeHooks = {
  '/pages/main': {
    beforeEnter: (to, from, next) => {
      next({
        name: 'nvueTab1',
        NAVTYPE: 'replaceAll'
      })
    }
  }
}
const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,  
	routes:ROUTES.map(route => {
        if (routeHooks[route.path]) {
            return Object.assign({}, route, routeHooks[route.path])
        }
        return route
	})
});
router.beforeEach((to, from, next) => {
	next();
});
export {
	router,
	RouterMount
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

使用 vue 作为启动页，并拦截到nvue页面。当 nvue 页面不是 tabbar 时，插件会完全劫持启动页，也就是说启动页不会被挂载，直接重定向到新的 nvue 页面。当 nvue 页面为 tabbar 时，插件不得不做一次挂载，否则直接拦截到 nvue 页面会出现空白，所以开发者不应该在过渡页面中写任何逻辑，因为相应的生命周期将会被触发。插件会自动识别拦截入口是否为 tabbar nvue 页面。如果是，那么插件会自动挂载并拦截到 tabbar nvue 页面，此流程结束页面渲染并展示。

← vue-router那套路由混用 →