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

1、路由信息

const router = createRouter({routes:[{path:'/selectTreePage/:action/:subject',name:"selectTreePage",component:()=>import('@/pages/home/SelectTreePage')}，...

2、目的：想在 SelectTreePage 组件中获取 action和subject的参数
3、SelectTreePage .vue

<script>
import { onMounted} from 'vue'
import { useRouter } from 'vue-router'
export default {setup() {const router = useRouter();onMounted(() => {// 打印console.log('router:', router.currentRoute)console.log('action', router.currentRoute.value.params.action)console.log('subject', router.currentRoute.value.params.subject)})return {}},
}
</script>

4、控制台 router.currentRoute 显示

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

vue：知识点5 加载pc或app页面组件-不同路由设置
Vue3获取地址栏参数
Vue3 获取地址栏参数有两个方式:查询参数和路径参数. Vue3获取地址栏参数是从路由router中获取,查询参数和路径参数获取方式不一样. 一.查询参数比如地址 http://127.0.0.1 ...
手摸手教你vite + vue3 + tsx 项目打包后动态路由无法加载页面问题
今天在部署项目到服务器后,发现动态路由失效,测试开发环境时路由都可以正常跳转,生产环境控制台报错: 原代码如下: 查看了官方文档,并没有找到合适的方案,后百度查看了一些解决方案,但都没有解决实际问题, ...
uniapp获取当前页面路由及参数 _@jie
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组 let curRoute = routes[routes.length - 1].route //获 ...
当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题
当使用this.$router.back()或者this.$router.go(-1)返回上一页时,搭配组件内路由守卫,屏幕闪烁和跳转页面错误问题问题描述:项目有这个需求,当页面的输入框内容填完之后 ...
VUE3页面跳转路由跳转带参路由跳转
VUE3页面跳转路由跳转带参路由跳转第一种第二种第一种跳转: import {useRouter} from "vue-router"; const router = us ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
iOS 组件化 —— 路由设计思路分析
原文前言随着用户的需求越来越多,对App的用户体验也变的要求越来越高.为了更好的应对各种需求,开发人员从软件工程的角度,将App架构由原来简单的MVC变成MVVM,VIPER等复杂架构.更换适合业 ...
vue笔记（四）注册组件，路由，vuex
官网一.项目中的组件注册二.路由三.vuex 一.项目中的组件注册 1. 全局 import Loading from '@/components/loading';//封装的loading组件 ...

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

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

最新文章

热门文章