vue跳转方式

简介: vue跳转方式

Vue的页面跳转有两种方式,第一种是标签内跳转,第二种是编程式路由导航

1.
<router-link to='/Demo'>
 <button>点击跳转1</button>
</router-link>
 
2.router.push("/Demo");

一、标签内通过 router-link跳转

通常用于点击 查看 按钮,跳转到其他页面

// 1. 不带参数直接跳转
<router-link to='/Demo'>
 <button>点击跳转</button>
</router-link>
 
<router-link :to="{name:'Demo'}"> 
<router-link :to="{path:'/Demo'}"> //name path都可以 建议用name 
  
// 2. 带参数跳转
// (1)query参数
<router-link :to="{path:'Demo',query:{id:1}}">
 <button>点击跳转2</button>
</router-link>
 
  
// 3. params参数
<router-link :to="{name:'Demo',params:{setid:2}}">
 <button>点击跳转</button>
</router-link>
 

二、编程式路由导航

import { useRouter } from "vue-router";
const router = useRouter();
//直接跳转
const handleChange = () => {
  router.push("/Demo");
};
  
 //带参数跳转
router.push({path:'/Demo',query:{id:3}});
router.push({name:'Demo',params:{id:1}});


相关文章
|
2天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
8 1
|
3天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
3天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
3天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
|
2天前
|
JavaScript 前端开发 开发工具
如何学习vue框架
【7月更文挑战第5天】 - 先学HTML/CSS/JS基础和前端工程化工具(npm, webpack, Git)。 - 从Vue官方文档学习基础,包括指令、组件、响应式系统。 - 深入研究Vue Router和Vuex,掌握路由管理和状态管理。 - 学习自定义指令和Mixins,优化性能技巧。 - 实战项目练习,加入Vue社区,阅读相关资源,提升技能。 - 关注Vue生态,持续实践和创新,以适应不断发展的框架。
6 0
|
3天前
|
缓存 JavaScript 算法
vue 性能优化
vue 性能优化
12 0
|
3天前
|
JavaScript 前端开发 程序员
Vue组件化、单文件组件以及使用vue-cli(脚手架)
Vue组件化、单文件组件以及使用vue-cli(脚手架)
16 0
|
3天前
|
JavaScript API
Vue数据动态代理机制的实现以及响应式与数据劫持
Vue数据动态代理机制的实现以及响应式与数据劫持
6 0
|
3天前
|
JavaScript 前端开发 程序员
Vue指令的使用以及自定义指令
Vue指令的使用以及自定义指令
8 0
|
3天前
|
JavaScript 前端开发 程序员
Vue2入门(安装Vue、devtools,创建Vue)以及MVVM分层思想
Vue2入门(安装Vue、devtools,创建Vue)以及MVVM分层思想
8 0