vue跳转页面的方法
2024-09-02
44
1 router-link跳转
<!-- 直接跳转 -->
<router-link to='/testDemo'>
<button>点击跳转2</button>
</router-link>
<!-- 带参数跳转 -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
<button>点击跳转1</button>
</router-link>
<router-link :to="{name:'testDemo',params:{setid:1111222}}">
<button>点击跳转3</button>
</router-link>
<router-link to="/HH?setid=123qq">跳转到至HelloVue</router-link>
2 this.$router.push()
<template>
<div id='test'>
<button @click='goTo()'>点击跳转4</button>
</div>
</template>
<script>
export default{
name:'test',
methods:{
goTo(){
//直接跳转
this.$router.push('/testDemo');
//带参数跳转
this.$router.push({path:'/testDemo',query:{setid:123456}});
this.$router.push({name:'testDemo',params:{setid:111222}});
}
}
}
</script>
3 a标签可以跳转外部链接,不能路由跳转
<a href="https://www.baidu.com"><button>点击跳转5</button></a>
接收方怎么接收参数??this.$route.query.serid和this.$route.params.setid,以下举一个接收的例子
注意接收参数时是 $route 不是 $router
<template>
<div>
testDemo{{this.$route.query.setid}}
</div>
</template>
更新于:2个月前赞一波!
相关文章
- 源码多多进鱼带VUE源码任务悬赏源码安装说明文档
- 什么是VoidZero?Vue和Vite之父尤雨溪成立的技术公司
- Vue 3.5引入新特性 还有与SSR相关的改进
- Vue CLI 2 脚手架 TabBar 组件封装
- Vue 网络请求模块封装 (axios)
- Vue 的认识、特点介绍、安装方式
- vue-router 的基本使用
- 基于Vue的免费开源admin管理后台框架
- vue cli 项目启动 HBuilderX 编辑器的使用
- vue cli 中的 import 和 export
- Vue cli4 图片地址引入的几种方式
- Vue CLI 脚手架简介及安装
- Vue 创建项目及目录介绍
- Vue组件插槽的使用
- Vue组件之动态组件
- Vue 组件介绍及使用
- Vue 父子组件通信传值(子组件中使用父组件中的数据)
- Vue指令之列表渲染
- Vue指令之条件渲染
- Vue和React怎么选?
文章评论
评论问答