vue跳转页面的方法
2024-09-02
19
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>
更新于:13天前赞一波!
相关文章
- vue cli 项目启动 HBuilderX 编辑器的使用
- vue cli 中的 import 和 export
- Vue cli4 图片地址引入的几种方式
- Vue CLI 脚手架简介及安装
- Vue 创建项目及目录介绍
- Vue组件插槽的使用
- Vue组件之动态组件
- Vue 组件介绍及使用
- Vue 父子组件通信传值(子组件中使用父组件中的数据)
- Vue指令之列表渲染
- Vue指令之条件渲染
- Vue和React怎么选?
- Vue 指令之v-on的使用
- Vue 指令之v-bind指令绑定属性
- Vue 实例、el、data
- Vue 指令之插值 v-text、v-html、v-once
- 2023年最受欢迎的Vue.js UI组件库
- Vue中使用Mock.js模拟接口请求数据
- 前端学react还是vue?
- vue下一页怎么做思路和代码
文章评论
全部评论