uniapp路由uni-simple-router使用示例

目录正文安装配置router文件夹下对应的 js文件main.jspage.json页面跳转和参数接收获取参数正文

要在uniapp中使用路由守卫，uniapp原生的api是比较欠缺的，所以要用‘uni-simple-router’插件包

安装// 项目根目录执行命令行 下载稳定版本 npm install uni-simple-router@2.0.7 // 根据pages.json总的页面，自动构建路由表npm install uni-read-pages配置

vue.config.js

注：如果根目录没有vue.config.js文件，要手动创建

// vue.config.jsconst TransformPages = require('uni-read-pages')const { webpack } = new TransformPages()module.exports = { configureWebpack: {plugins: [ new webpack.DefinePlugin({ROUTES: webpack.DefinePlugin.runtimeValue(() => { const tfPages = new TransformPages({includes: ['path', 'name', 'aliasPath','meta'] }); return JSON.stringify(tfPages.routes)}, true) })] }}router文件夹下对应的 js文件

写如下代码

import { RouterMount, createRouter } from 'uni-simple-router';const router = createRouter({ platform: process.env.VUE_APP_PLATFORM, routes: [...ROUTES]});//全局路由前置守卫router.beforeEach((to, from, next) => {//权限控制登录 if(to.meta.auth){console.log('需要登录');if('token'){ next();}else{ console.log('请登录');} }else{console.log('不需要登录'); next(); } console.log('前置守卫'+JSON.stringify(to));});// 全局路由后置守卫router.afterEach((to, from) => { console.log('跳转结束')})export { router, RouterMount}main.jsimport {router,RouterMount} from './router/router.js' //路径换成自己的Vue.use(router)//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式// #ifdef H5 RouterMount(app,router,'#app')// #endif// #ifndef H5 app.$mount(); //为了兼容小程序及app端必须这样写才有效果// #endifpage.json 'pages': [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{ 'path': 'pages/index/index', 'name': 'index', 'style': {'navigationBarTitleText': 'uni-app' }}, { 'path': 'pages/home/home', 'name': 'home', 'meta': {'auth': false, //需要登录'async': true, //是否同步'title': '首页', //标题'group': '商城' //分组 }, 'style': {'navigationBarTitleText': '','enablePullDownRefresh': false }},{ 'path': 'pages/haha/haha', 'name': 'haha', 'meta': {'auth': true, //需要登录'async': true, //是否同步'title': '首页', //标题'group': '商城' //分组 }, 'style': {'navigationBarTitleText': '','enablePullDownRefresh': false }} ], 'globalStyle': {'navigationBarTextStyle': 'black','navigationBarTitleText': 'uni-app','navigationBarBackgroundColor': '#F8F8F8','backgroundColor': '#F8F8F8' }}页面跳转和参数接收

push()

pushTab() : 跳转tar栏

replace() : 替换

replaceAll() ： 替换所有

back() : 直接带上数字返回第几层

注意：path和query配合使用，而name和params配合使用

//通过name方式跳转this.$Router.push({ name: 'home', params: {name: 'Joseph',age: 22 }})------------------------------------//通过path形式进行跳转this.$Router.push({ path: '/pages/haha/haha',query: { name: 'Josdep33333h', age: 24}})-------------------------------------//用uni形式跳转到新页面,并传递参数uni.navigateTo({ url:'/pages/home/home?id=2&name=Josep33333h'});获取参数 onLoad(option) { //原生获取数据console.log('zz',option); // query传参const query=this.$Route.queryconsole.log(query);// params传参const params=this.$Route.paramsconsole.log(params);}

以上就是uniapp路由uni-simple-router使用示例的详细内容，更多关于uniapp路由uni-simple-router的资料请关注好吧啦网其它相关文章！