uniapp + VUE3 +setup语法糖模式，真机获取当前路由

最新推荐文章于 2024-12-11 20:03:50 发布

Js_Zoro

最新推荐文章于 2024-12-11 20:03:50 发布

阅读量1.0k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uni-APP 文章标签： uni-app javascript vue.js

本文链接：https://blog.youkuaiyun.com/Js_Zoro/article/details/139295539

下面是浏览器有用，真机没用的；

import {
    getCurrentInstance ,computed} from 'vue';

const {
   proxy} = getCurrentInstance();

const router = computed((

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Js_Zoro

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uni-app - 详细实现 H5 端获取当前页面的路由和参数（得到当前页面地址的路径 URL）

前端开发大师鸭

12-18

1万+

Uniapp怎么获取当前页面路由，uniapp获取当前路由地址，uniapp获取当前页面的路径，UNI-APP_uni-app获取当前页面路由，uni-app获取当前url地址参数，uni-app如何获取当前页面路由，uniapp获取当前页面路由及参数，uniapp获取当前页面传递的参数及路由的方法，uniapp获取当前页面路由及参数获取Uni-app页面路由的方式，在uniapp、mpvue、vue(h5)中如何获取当前页面和地址栏，uniapp获取当前路由的参数并且加入到缓存，uniapp获取当前页面

关于uniapp+vue2 升级 Vue3 后无法获取 query的问题

热门推荐

坚信万物皆可切的切图仔

12-24

5万+

有三种方法第一种 import { defineComponent, ref, getCurrentInstance } from 'vue'; const { proxy }: any = getCurrentInstance(); console.log(proxy.$router.currentRoute.value); 第二种 import { defineComponent, ref, toRaw} from 'vue'; import { useRouter } from 'vue

HBuilderX（uni-app）Vue3路由传参和接收路由参数！！

xiaolouuuu的博客

12-11

1860

uni-app搭建小程序时候Vue3语法接收路由参数，去官方文档查看，是onLoad的option接收参数，我试过，接收不到，上网查各种方法也是不太行，最后自己琢磨出来了，这参数藏得还挺深！！

uni-app+vue3 获取路由传递的参数

m0_60708088的博客

06-09

4823

uni-app+vue3 获取路由传递的参数

uniapp+vue3+setup语法实现路由传递接收参数

qq_44741577的博客

05-17

1570

【代码】uniapp+vue3+setup语法实现路由传递接收参数。

uniapp开发：uniapp快速体验vue3.2之setup语法糖，怎么使用怎么爽

web18484626332的博客

03-09

2626

目录概要拉开序幕的setup语法糖 生命周期钩子 ref函数与reactive函数对比 computed计算属性监视（watch、watchEffect）组件注册组件传值 provide/inject style样式使用v-bind绑定动态值获取路由信息全局API的转移 Composition API 的优势关注我，不迷路 vue3.x相关会在将来持续更新…更新历史：20211122、20220222 概要随着vue3.0的发布，不久后vue3.2紧接着发布了，现在uniapp也支持了

搭建UniApp + TS + Vue3 + Vite项目

2302_77862232的博客

12-11

582

创建以 javascript 开发的工程创建以 typescript 开发的工程安装sass安装uni-ui目前为止项目已经能正常的运行了安装wot-uiwot-ui是vue3+ts编写的全端支持的ui库，组件较多，提高开发效率配置easycom自动引入组件提醒废弃了一批API，而组件库目前还未兼容，因此请确保你的sass版本为1.78.0及之前的版本。安装axios。

【Vue3 + Vite + setup语法糖 + Pinia + VueRouter + Element Plus】开发框架

01-09

该项目集成了 Vue3 Vite setup语法糖 Pinia VueRouter Element Plus Axios 等，目前公司必备开发知识、已封装为二次开发框架，减少项目构建以提升开发效率，基础语法偏多，更适合于基础较弱的同学。其中包括了...

uniapp 获取当前页面的路由

qq_17627195的博客

09-15

8789

uniapp 获取当前页面路由注意：uniapp 的组件里面没有onLoad等生命周期，要用Vue原生的生命周期。

Vue3路由参数获取方式

05-25

2万+

方法一：通过引入 “vue-router” 的 useRouter import { useRouter, onMounted } from 'vue-router' setup (props, context) { const router = useRouter(); onMounted(() => { // 打印 console.log('router:', router.currentRoute.value.query) }) return {} } ...

vue3获取当前页面组件的路由参数信息

w1234567465的博客

04-29

1万+

1、路由信息 const router = createRouter({ routes:[ { path:'/selectTreePage/:action/:subject', name:"selectTreePage", component:()=>import('@/pages/home/SelectTreePage') }，... 2、目的：想在 SelectTreePage 组件中获取 action和subject的参数 3、SelectTr

uniapp，vue3路由传递接收参数

OnismYY的博客

07-28

4868

官网vue2升vue3的教程中，演示了如何使用onLoad，记得把官网所有内容都看一遍！

uni-app如何使用vue3语法糖

BradenHan的专栏

08-03

4241

鼠标邮件点击需要创建组件的文件夹，即可出现如下界面"填写模板信息。

vue3在 setup 中访问路由和当前路由

DN金猿的博客

07-15

701

所以如果你只在模板中使用这些对象的话，是不需要。对象是一个响应式对象。在多数情况下，你应该。对象，同时直接监听你期望改变的参数。请注意，在模板中我们仍然可以访问。，所以我们不能直接访问。

uni-app如何获取当前页面路由

weixin_38982591的博客

07-08

5460

方法一：用官方方法getcurrentpages先获取所有数组，然后取最后一个数组，再去获取路由 let routes = getCurrentPages(); // 获取当前打开过的页面路由数组 let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由方法二：用官方已经挂在的$mp变量获取，其实和上述方法基本上是一致的，只是方法被挂载在$mp let curRoute = this.$mp.pa

如何在uniapp(vue3)中使用Vue Router和router-view进行页面管理

Jiaberrr的博客

10-07

3713

通过本文，我们学习了如何在 uniapp 中使用 Vue 3 的组合式 API 和 Vue Router 来管理路由。这种组合不仅提高了代码的可读性和可维护性，而且使得大型项目的开发更加高效。希望这些信息能帮助你在 uniapp 项目中更好地利用 Vue Router。

uniapp使用vue3语法利用uni.navigateTo跳转和接收参数

m0_49014420的博客

01-10

5764

uniapp使用vue3语法利用uni.navigateTo跳转和接收参数

uniapp+vue3+js前端框架

03-14

<think>嗯，用户想了解如何使用UniApp和Vue3结合JavaScript进行前端开发。首先，我需要回忆一下UniApp和Vue3的基本知识。UniApp是一个基于Vue.js的跨平台框架，支持用Vue语法开发多端应用。Vue3引入了组合式API，比如setup函数和响应式API，这些应该和UniApp结合使用会有不同的配置步骤。接下来，用户可能需要具体的步骤指导，比如环境搭建、项目创建、组合式API的使用、路由管理和状态管理等。记得要提到如何初始化项目，安装必要的依赖，比如Vue Router或者Pinia。另外，UniApp的路由管理可能和传统Vue项目不同，需要说明如何使用页面配置文件而不是Vue Router。还要注意代码示例的正确性，比如在main.js中创建应用实例时，是否需要使用createSSRApp或者其他方法。根据引用3中的内容，可能需要使用createSSRApp并导出函数。状态管理部分，可以引用Store的例子，区分Mutations和Actions的区别，如引用3提到的。另外，用户可能关心如何调用API，引用4中提到了使用环境变量拼接API地址，这部分需要解释如何在UniApp中配置环境变量和发起网络请求。比如使用uni.request方法，并处理响应。可能还需要对比Vue2和Vue3在UniApp中的不同，特别是组合式API的优势，比如更好的代码组织和复用。同时，要确保所有代码示例符合用户的要求，使用JavaScript而非TypeScript，虽然引用1和2提到了TypeScript，但用户明确要求用JavaScript，所以需要调整。最后，检查是否有相关的问题建议，比如跨平台适配、性能优化等，确保覆盖用户可能遇到的常见问题。还要注意引用标记的正确使用，比如在提到路由管理时引用2，状态管理引用3，API调用引用4等。</think>### 如何使用 UniApp 和 Vue3 结合 JavaScript 进行前端开发 #### 1. 环境搭建与项目初始化 - **安装HBuilderX**：UniApp官方推荐使用HBuilderX作为开发工具，支持Vue3模板创建。 - **创建项目**：选择「Vue3 + JavaScript」模板，自动生成基础项目结构。目录包含`pages`（页面）、`components`（组件）、`static`（静态资源）等文件夹[^2]。 #### 2. 组合式API核心用法在`.vue`文件中，通过`setup()`函数组织逻辑： ```javascript import { ref, onMounted } from 'vue'; export default { setup() { const count = ref(0); const increment = () => count.value++; onMounted(() => { console.log('组件已加载'); }); return { count, increment }; } } ``` 此例展示了响应式变量`count`和生命周期钩子`onMounted`的使用，符合Vue3的组合式API风格。 #### 3. 路由管理 UniApp使用**页面配置文件**实现路由，无需安装Vue Router： - 在`pages.json`中配置页面路径与样式： ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } } ] } ``` 跳转使用`uni.navigateTo({ url: '/pages/index/index' })`[^2]。 #### 4. 状态管理（Vuex） - **定义Store**：在`store`目录创建`index.js`： ```javascript import { createStore } from 'vuex'; export default createStore({ state: { user: null }, mutations: { SET_USER(state, payload) { state.user = payload; } }, actions: { login({ commit }, userData) { commit('SET_USER', userData); } } }); ``` - **注入Store**：在`main.js`中挂载： ```javascript import { createSSRApp } from 'vue'; import App from './App'; import store from './store'; export function createApp() { const app = createSSRApp(App); app.use(store); return { app }; } ``` `mutations`用于同步修改状态，`actions`处理异步逻辑[^3]。 #### 5. 网络请求与跨平台适配 - **调用API**：使用`uni.request`发起请求： ```javascript uni.request({ url: process.env.VUE_APP_BASE_API + '/user', success: (res) => { console.log(res.data); } }); ``` - **环境变量**：在`.env`文件中定义`VUE_APP_BASE_API`实现环境区分[^4]。 #### 6. 跨平台兼容性处理通过**条件编译**实现多端差异代码： ```javascript // #ifdef H5 console.log('仅在H5环境执行'); // #endif ```