uniapp this.$route

时间: 2023-12-03 14:29:45 浏览: 157

uniapp中的一个完全相似Vue-router的路由插件

5星 · 资源好评率100%

本人小白，干这一行时间还短，出现什么问题望大佬指正。这篇文章是结合文档然后加入自己的部分理解。 uni-simple-router 一个更为简洁的Vue-router，专为 uni-app 量身打造插件作者： 1606726660@qq.com 插件文档：插件文档地址 1.引入三种引用方式第一种 npm安装项目根目录命令行执行 npm install uni-simple-router 第二种插件市场（使用HBuilderX导入插件）第三种 ZIP下载解压 2.项目中引入 import Vue from 'vue' import {RouterMount} from 'un 【uni-app中的路由管理：uni-simple-router】 uni-app 是一个基于 Vue.js 的多端开发框架，它允许开发者编写一次代码，跨平台运行。在 uni-app 中，路由管理扮演着核心角色，因为它负责页面间的跳转和数据传递。而 uni-simple-router 是一个专为 uni-app 设计的轻量级路由插件，它的设计思想与 Vue-router 非常相似，旨在简化 uni-app 中的路由配置。 ### 1. 安装和引入 uni-simple-router uni-simple-router 的安装有三种方式： 1. **npm 安装**：在项目根目录下通过命令行执行 `npm install uni-simple-router`。 2. **插件市场**：使用 HBuilderX 导入插件市场中的 uni-simple-router。 3. **ZIP 下载**：下载插件的 ZIP 包，解压后引入到项目中。引入 uni-simple-router 需要在项目中导入 `Vue` 和 `RouterMount`，例如： ```javascript import Vue from 'vue'; import { RouterMount } from 'uni-simple-router'; import Router from './router'; Vue.use(Router); ``` ### 2. 创建路由结构在项目的根目录下创建一个名为 `router` 的文件夹，包含 `modules` 子文件夹。`modules` 文件夹用于存放路由表模板，每个路由模块对应一个 `.js` 文件。 **router/modules/index.js** 用于整合所有路由模块： ```javascript const files = require.context('.', false, /\.js$/); const modules = []; files.keys().forEach(key => { if (key === './index.js') return; const item = files(key).default; modules.push(...item); }); export default modules; ``` 这样，`modules` 文件夹下的每个路由模块文件都会被读取并合并到路由表中。例如，创建一个名为 `home.js` 的路由模块文件： ```javascript const home = [ { path: '/pages/home/index', aliasPath: '/', // 对于h5端，首页需设置aliasPath name: 'index', meta: { title: '首页' }, }, { path: '/pages/home/list', name: 'list', meta: { title: '列表' }, }, ]; export default home; ``` ### 3. 配置 router/index.js 在 `router/index.js` 中，引入 `modules` 和 `Vue`，并创建 `Router` 实例： ```javascript import modules from './modules'; import Vue from 'vue'; import Router from 'uni-simple-router'; Vue.use(Router); const router = new Router({ routes: [...modules], // 路由表 }); // 全局路由前置守卫 router.beforeEach((to, from, next) => { next(); }); // 全局路由后置守卫 router.afterEach((to, from) => {}); export default router; ``` ### 4. 集成到主文件 main.js 在 `main.js` 中引入配置好的路由，并使用 `RouterMount` 渲染应用： ```javascript import Vue from 'vue'; import App from './App'; import router from './router'; import { RouterMount } from 'uni-simple-router'; App.mpType = 'app'; const app = new Vue({ ...App, }); // H5 平台使用 RouterMount 渲染 #ifdef H5 RouterMount(app, '#app'); #else app.$mount(); // 兼容小程序及App端 #endif ``` ### 5. 自动构建路由表若想避免手动配置 `modules` 文件夹下的路由，可以使用 `uni-read-pages` 工具自动化处理。安装该工具后，在 `vue.config.js` 中配置并调用 `uni-read-pages`，根据项目中的页面结构自动生成路由表。通过以上步骤，你可以实现一个类似于 Vue-router 的路由管理系统，使得 uni-app 开发过程更加便捷。在实际开发中，还可以利用 uni-simple-router 提供的其他功能，如动态路由、嵌套路由、命名视图等，进一步优化应用的路由管理。

在uniapp中，可以使用this.$route来获取当前页面的路由信息。通过this.$route.query可以获取url中参数值。例如，如果你需要获取url中的code参数，可以使用以下代码： ```javascript const code = this.$route.query.code; ``` 这样就可以获取到code参数的值了。需要注意的是，使用this.$route.query来获取参数值，前提是该参数存在于url中。如果参数不存在，返回的值会是undefined。

阅读全文

uniapp this.$route

相关推荐

在Vue中使用this.$store或者是$route一直报错的解决

vue.js this.$router.push获取不到params参数问题

uniapp this.$u.route

使用通过 uniapp 的 this.$route.query 获取 URL 参数中的对象，并存储到一个变量中，报错Cannot read property 'query' of undefined"

uniapp 通过this.$router.push跳转页面为什么生命周期函数不执行呢

uniapp uni.onAppRoute is not a function

如何正确导入$route

uniapp的App.vue根组件中获取当前路由信息是个空数组怎么办

uniapp 检查当前页面是那个route

uniapp怎么在pages.json的tabBar里面做中英文切换

uniapp中使用 uni.navigateBack() 返回上级页面并传参,vue3

uniapp具体如何在App.vue中使用自定义tabbar

uniapp中怎么获取pages.json中设置的meta字段

uniapp navigator

uniapp设置标题

uniapp tabbar跳转

uniapp路由传值

uniapp路由传参

uniapp自定义tabbar

最新推荐

解决vue项目中某一页面不想引用公共组件app.vue的问题

yolov3 在 Open Images 数据集上预训练了 SPP 权重以及配置文件.zip

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

如何在Springboot后端项目中实现前端的多人视频会议功能，并使用Vue.js与ElementUI进行界面开发？