uniapp路由—— uni-simple-router(uniapp route)

编辑：rootadmin

uniapp路由—— uni-simple-router

推荐整理分享uniapp路由—— uni-simple-router(uniapp route)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uni-app路由,uniapp的路由跳转,uniapp的路由跳转,uniapp常见的路由与页面跳转api,uniapp获取路由参数,uniapp的路由跳转,uni-app路由,uniapp的路由跳转,内容如对您有帮助，希望把文章链接给更多的朋友！

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

安装 // 项目根目录执行命令行npm install uni-simple-router// 根据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 H5RouterMount(app,router,'#app')// #endif// #ifndef H5app.$mount(); //为了兼容小程序及app端必须这样写才有效果// #endif page.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);}

本文链接地址:https://www.jiuchutong.com/zhishi/290659.html 转载请保留说明！

上一篇：免费镜像 ChatGPT 网站随你挑和分享一批可用的 API Keys(免费镜像翻转软件)

下一篇：Vue2 大型项目升级 Vue3 详细经验总结(vue2升级3)