update
迁移文档 小爱为你推荐使用新版本哦~~

# 路由构建

# 默认的路由配置


 

























 


const router = createRouter({
    platform:'',  
    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: {
        loddingPageStyle: () => JSON.parse('{"backgroundColor":"#FFF"}'),
        loddingPageHook: (view) => { view.show(); },
        launchedHook: () => { plus.navigator.closeSplashscreen(); },
        animation: { animationType: 'pop-in', animationDuration: 300 }
    },
    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

以上是 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

这样的配置在 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

# 在页面下获取参数

排除动态传参的方式。你可以在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