备注中的内容仅适用于HBulider搭建的uniapp项目。其他方式搭建的uniapp工程，请参考uni-simple-router官网uni-simple-router(hhyang.cn)uniapp使用了很多vue的API，但是和vue-router相比，还是缺少路由管理功能，例如全球导航守卫。我们可以使用uniapp的插件uni-simple-router来实现类似vue-router的功能，但是在多终端兼容的时候，有些用法需要注意，我们再说。1.安装如果你的项目没有使用包，请先初始化：$npminit-y安装依赖：$npminstalluni-simple-routeruni-read-pagesuni-read-pages的作用是：读取uniapp的页面。json作为路由配置，将pages.json中的路由配置转化为vue-router配置的形式。二、配置和初始化1、在根目录新建vue.config.js文件，写入如下内容：//vue.config.jsconstTransformPages=require('uni-read-pages')const{webpack}=newTransformPages()module.exports={configureWebpack:{plugins:[newwebpack.DefinePlugin({ROUTES:webpack.DefinePlugin.runtimeValue(()=>{consttfPages=newTransformPages({包括：['path','name','aliasPath']});returnJSON.stringify(tfPages.routes)},true)})]}}??关注第10行：//...includes:['path','name','aliasPath']//...includes是路由器会读取页面路由中的字段名。如果后面需要meta等路由信息，可以在include中加上'meta'，在pages路由中写入相应的数据。可以从router获取（后面会补充案例）2.新建根目录写入router.js，写入如下内容：//router.jsimport{RouterMount,createRouter}from'uni-simple-router';constrouter=createRouter({platform:process.env.VUE_APP_PLATFORM,routes:[...ROUTES]});//全局路由前卫路由r.beforeEach((to,from,next)=>{next();});//全局路由postguardrouter.afterEach((to,from)=>{console.log('jumpend')})export{router,RouterMount}3.main.js导入router.js并挂载//main.jsimportVuefrom'vue'importAppfrom'./App'import{router,RouterMount}from'./router.js'//改路径为自己的Vue.use(router)App.mpType='app'constapp=newVue({...App})//H5端从v1.3.5开始，应该去掉原app.$mount();使用路由自带的渲染方式//#ifdefH5RouterMount(app,router,'#app')//#endif//#ifndefH5app.$mount();//为了兼容小程序和app必须这样写才有效//#endif!！注意app的挂载方式，一定要按照这里的写法实现！4、重新编译运行3、路由跳转方法一：组件跳转在vue-router中，可以通过组件进行页面跳转，uni-simple-router也提供了类似的组件：只有这个组件需要手动注册//main.jsimportMylinkfrom'./node_modules/uni-simple-router/dist/link.vue'Vue.component('my-link',Mylink)注册组件时注意，组件不要和pages.json中的easycom属性规则冲突，否则会查找easycom路径下的组件，所以找不到组件，会报错使用路径对象跳转组件的完整属性可以在文档中找到：Routerbuildoptions|uni-simple-router(hhyang.cn)方法二：程序化导航：在vue例子中，通过this.$Router获取路由对象（R必须大写）。程序化导航和vue-router很接近，但是还是有一些需要注意的地方。有关详细信息，请参阅文档。??必须要注意的地方：在vue项目中，跳转到路由时经常使用name来进行跳转，相对于path，name更简洁，不易被更改。但是在uniapp中要注意，如果要用名字跳转，不能带query参数！同理，params参数不能使用路径跳转//下面是错误的写法，name不能和query一起使用，path不能和params参数一起使用。this.$Router.push({name:'newsDetail',query:{id:'123'}})this.$Router.push({path:'/pages/news/detail',params:{id:'123'}})//下面是正确的写法：this.$Router.push({name:'newsDetail',params:{id:'123'}})this.$Router.push({path:'/pages/news/detail',query:{id:'123'}})简而言之：记住：查询参数与路径匹配，params参数与名称匹配4.APP退出应用。js文件import{RouterMount,createRouter,runtimeQuit}from'./dist/uni-simple-router.js';//runtimeQuit记得导入constrouter=createRouter({platform:process.env.VUE_APP_PLATFORM,routerErrorEach:({type,msg})=>{console.log({type,msg})//#ifdefAPP-PLUSif(type===3){router.$lockStatus=false;runtimeQuit();}//#endif},路线:[...路线]});在routerErrorEach中，type的含义如下：0TableShownext(false)1表示next(unknownType)2表示锁定状态，禁止跳转3表示获取页栈时，页栈层数不够。除了再次点击退出，还可以实现自己的逻辑，比如弹出Window提示退出等：)=>{console.log({type,msg})//#ifdefAPP-PLUSif(type===3){router.$lockStatus=false;uni.showModal({title:'Prompt',content:'你确定要退出应用程序吗？',success:function(res){if(res.confirm){plus.runtime.quit();}}});}//#endif},routes:[...路线]});五、Route对象和vue-router一样，uniapp也可以获取当前页面的路由信息??，只是首字母改为大写：onLoad(){console.log(this.$Route)}$Route包含路由的基本信息和vue.config.js配置中includes配置的字段，与navigationguard中的to/from对象一致，使用includes配置项和navigationguard，可以实现权限校验的配置：//router.jsrouter.beforeEach((to,from,next)=>{if(to.meta&&to.meta.power==="public"){//公共页面,不需要登录}else{//需要登录的页面letisLogin=checkLogin();//判断是否登录if(isLogin){next();}else{next({name:"login"})}}});//pages.json"pages":[{"path":"pages/login/login","name":"login","desc":"loginpage","meta":{"power":"public"//不需要登录}},{//需要登录"path":"pages/my/my","name":"login","desc":"我的”}//...]
