Vue路由跳转及路由传参

简介: Vue路由跳转及路由传参

跳转

跳转使用 router

vue 的路由跳转有 3 个方法: go 、 push 、 replace


go :接收数字, 0 刷新,正数前进,负数后退

push :添加,向页面栈中添加一条记录,可以后退

replace :替换,替换页面栈中最新的一条记录,不可后退

push 和 replace 方法可接受字符串或对象

字符串:匹配 path

对象:对象内指定


1. 在页面中引入router

import { useRouter } from 'vue-router'
const router = useRouter()

2. 写跳转即可

// router.push('/about')
router.push({
name: 'about'
})

传参

接收统一使用route

1. import { useRoute } from 'vue-router'
2. const route = useRoute()

传参有两种: query 参数、 params 参数


query :


地址上表现为: /about?id=1


传:在跳转方法中添加 query 属性,属性内写需要传递的参数


接:在 route 的 query 属性中取值


params :


地址上表现为: /about/1


配置:在路由配置中 path 后面添加 /: 参数名


传:在跳转方法中添加 params 属性,属性内写需要传递的参数


接:在 route 的 params 属性中取值


注意: params 只能使用 name 跳转


相关文章
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
7天前
|
JavaScript
|
5天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
6天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
22 2
|
9天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
22 6
|
9天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
23 4
|
9天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
16 1
|
9天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
20 1
|
14天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
23 1
|
9天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
32 0