# 路由构建
# 默认的路由配置
const router = createRouter({
platform:'h5',
keepUniOriginNav:false,
debugger:false,
routerBeforeEach:(to, from, next) => { next() },
routerAfterEach: (to, from) => {},
routerErrorEach: (error, router) => { err(error, router, true) },
detectBeforeLock: (router, to, navType) => {},
resolveQuery:(jsonQuery)=>jsonQuery,
parseQuery:(jsonQuery)=>jsonQuery,
h5:{
paramsToQuery: false,
vueRouterDev: false,
vueNext: false,
mode: 'hash',
base: '/',
linkActiveClass: 'router-link-active',
linkExactActiveClass: 'router-link-exact-active',
scrollBehavior: (to, from, savedPostion) => ({ x: 0, y: 0 }),
fallback: true
},
APP: {
registerLoadingPage: true, //v2.0.6+
loadingPageStyle: () => JSON.parse('{"backgroundColor":"#FFF"}'),
loadingPageHook: (view:any) => { view.show(); },
launchedHook: () => { plus.navigator.closeSplashscreen(); },
animation: {}
},
applet: { //v2.0.6+
animationDuration: 300
},
beforeProxyHooks: { //v2.0.8+
onLoad: ([options], next, router) => {
next([parseQuery({query: options}, router)])
}
},
routes:[],
});
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
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
以上是 uni-simple-router 所有的可用构建项的默认值。对于糟色部分是告诉开发者，这个选项是必须传递的。想了解更多构建选项请点我
# routes 在跨端的优雅配置
// pages.json
{
"pages": [
{
"path": "pages/index/index",
"aliasPath":"/",
"name":"index"
},
{
"path": "pages/page2/page2",
"aliasPath":"/page2/:id",
"name":"page2"
},
{
"path": "pages/page3/page3",
"aliasPath":"/:name/page3/:id",
"name":"page3"
},
{
"path" : "pages/404/404",
"name": "404"
}
]
}
//router.js
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routes: [
...ROUTES,
{
path: '*',
redirect:(to)=>{
return {name:'404'}
}
},
]
});
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
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
这样的配置在 vueRouterDev:false 的情况下，收益最大化。当然你还可以写更多高级的匹配规则 详细请查看这里。路由表中包括：动态路由、通配符、全路径匹配，此时我们就需要注意跳转方式啦。动态路由时，采用 name 的方式跳转，所以 uni-app 的跳转api在跳转到动态路由下会提示出警告。正确的做法应该像这样
// 跳转到 "/page2/:id"
this.$Router.push({
name:'page2',
params:{
id:12
}
})
// 跳转到 /:name/page3/:id
this.$Router.push({
name:'page3',
params:{
name:'hhyang',
id:12
}
})
// 跳转到 pages/404/404
// 也可以使用uni的api跳转 同样触发路由守卫
uni.navigateTo({
url:'/pages/404/404?id=555&name=hhyang'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 在页面下获取参数
排除动态传参的方式。你可以在onload生命钩子下获取，但是。。。。如果是动态路由传参？uni-app 无法正确解析参数，那我们应该怎么获取呢？不要慌看代码。
// xxx.vue
<script>
export default {
data() {
return {
}
},
onLoad(...options){
// 自己打印来看看咯
console.log(options)
console.log(this.$Route)
},
methods: {
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19