uni-app引入uni-simple-router基础配置

uni-simple-router 是 专为 uni-app 打造的路由管理器。它保留了 Vue-router 完全相似的书写风格.

1. 安装

npm install uni-simple-router

2. 使用

main.js

import router from "./router/index.js";
import { RouterMount } from "uni-simple-router";
......
const app = new Vue({
    ...
})

//#ifdef H5
RouterMount(app, "#app");
//#endif

//#ifndef H5
app.$mount();
//#endif

router表

import Vue from 'vue'
import Router from 'uni-simple-router';
Vue.use(Router);
const router = new Router({
    routes:[
        ....路由配置
        {
            aliasPath:'',
            path:'',
            name:''
        }
    ]
})
export default router;

vue.config.js配置

module.exports = {
    ......
    transpileDependencies: ['uni-simple-router'],
}

页面中使用

路由跳转
this.$Router.push({
    path:'',
    query:{}
})

页面接收参数
onLoad(){
    const query=this.$Route.query;
}

3. 注意事项

• 不要重复use，在router文件中已经使用Vue.use(Router)，在main.js中就不需要再use了
• main.js中router虽然没用到，但是也必须引入，否则app端路由跳转不了
• main.js中mount的方式严格按照文档中的来
• 使用编程式路由传参时，参数值不能是undefined，否则路由跳转不了
• router配置的aliasPath只能在H5中使用，非H5环境跳转不了，请使用完整path或者name跳转