vue跳转页面的几种方法(推荐)

vue跳转不同页面的多种方法

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>

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>

params和query传参数有什么不一样??在地址栏中可以看到,params传参数时,地址栏中看不到参数的内容,有点像ajax中的post传参,query传参数时,地址栏中可以看到传过来的参数信息,有点像ajax的个体传参

如果单独传setId一个参数的时候,地址栏中的地址如下图:

第一种方式:path - query 传参

第二种方式:name - params传参数

但是一般情况下,传参数是传递一个对象,当传递的是一个对象的时候,地址栏中的地址如下图:

第一种方式:path - query 传参

第二种方式:name - params传参数

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>

知识点补充:vue三种不同方式实现页面跳转

Vue:router-lin

 <router-link to="/">[跳转到主页]</router-link>
 <router-link to="/login">[登录]</router-link>
 <router-link to="/logout">[登出]</router-link>

this.$router.push("/");

<button @click="goHome">[跳转到主页]</button>
export default {
 name: "App",
 methods: {
 // 跳转页面方法
 goHome() {
 this.$router.push("/");
 },
}

this.$router.go(1);

 <button @click="upPage">[上一页]</button>
 <button @click="downPage">[下一页]</button>
 upPage() {
 // 后退一步记录,等同于 history.back()
 this.$router.go(-1);
 },

 downPage() {
 // 在浏览器记录中前进一步,等同于 history.forward()
 this.$router.go(1);
 }

代码示例:

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <router-view/>
 <router-link to="/">[跳转到主页]</router-link>
 <router-link to="/login">[登录]</router-link>
 <router-link to="/logout">[登出]</router-link>

 <!-- javascript跳转页面 -->
 <button @click="goHome">[跳转到主页]</button>

 <!-- 回到上一页 -->
 <button @click="upPage">[上一页]</button>
 <button @click="downPage">[下一页]</button>

 <!-- 回到下一页 -->

 </div>
</template>

<script>
 export default {
 name: "App",
 methods: {
 // 跳转页面方法
 goHome() {
 this.$router.push("/");
 },
 upPage() {
 // 后退一步记录,等同于 history.back()
 this.$router.go(-1);
 },
 downPage() {
 // 在浏览器记录中前进一步,等同于 history.forward()
 this.$router.go(1);
 }
 }
 };
</script>

总结

到此这篇关于vue不同方法跳转页面的几种方法的文章就介绍到这了,更多相关vue 跳转页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-03-26

vue单页面应用打开新窗口显示跳转页面的实例

一般单页面应用,例如vue都是通过vue-router来做跳转,不会像多页应用一样另起新页面显示,但是也不排除一些业务上的需要. 一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定: this.$router.push({name: 'abc'}) 以上是常规的通过路由的页面跳转方法. 我们现在的需求是另外开启一个新页面来显示跳转到的页面,原本的窗口保持页面不变. const { href } = this.$router.resolve({ name: 'abc' }) window.

基于vue循环列表时点击跳转页面的方法

1.在data数组里边添加id(说明:我的是虚拟数据) 2.在点击事件上传入id参数,如下: 3.在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面. 至此跳转完成. 附加: 点击返回上一页方法: window.history.go(-1);就是返回上一页.(不要忘记在标签上添加click点击事件) returnS:function () { window.history.go(-1); } 以上

基于vue开发微信小程序mpvue-docs跳转页面功能

打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

mpvue跳转页面及注意事项

下面先给大家介绍下mpvue跳转页面,具体内容如下所示: 正准备写一个小程序,得知了mpvue开源的消息,又恰巧之前刚刚学习了一点vue,便开始了我的mpvue学习之路. 第一步就是配置环境之类的...附上官网的quickstart    http://mpvue.com/mpvue/quickstart/ 相信看完官网的教程之后, 你的项目应该已经搭好了.下面说2个小问题的解决办法吧 1.编译总通不过,eslint限制太严格,关闭它吧(如果你是一个严谨的人,那就..吧) build文件夹---

详解刷新页面vuex数据不消失和不跳转页面的解决

先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题 刷新 刷新相当与重启项目,之前获取到的数据也只是通过store暂存起来,项目关闭时就不见了,这有些像电脑重启,存储在RAM的数据会消失.但是储存在sessionstorage.localstorage和cookie里的内容不会消失. Vuex 方法思路 首先得熟悉vuex,官网中介绍 Vuex 是一个专为 Vue.

vue 解决form表单提交但不跳转页面的问题

vue使用@submit.prevent=""来设置提交时执行的函数,并阻止页面跳转: <form id="msgForm" action="" method="post" @submit.prevent="sub"> sub函数写在methods内: methods:{ $.post('http://api.test.ai/visitorinfo/', $('#msgForm').serial

vue-router跳转页面的方法

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <

Vue.js实战之利用vue-router实现跳转页面

前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D

Vue.js实战之使用Vuex + axios发送请求详解

前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果.并且基于 Vue.js 2.0 全家桶.具体效果如下图所示: 最终效果可以翻到文章最后观看. 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示: 教程如下所示: 从图中以及我

浅谈Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

Vue.js实战之Vuex的入门教程

前言 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式,详细点击这篇文章查看. 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便.Vue 的状态管理工具 Vuex 完美的解决了这个问题. 一.安装并引入 Vuex 项目结构: 首先使用 npm 安装 Vuex cnpm install vuex -S 然后在 main.js 中引入 import Vue from 'vue' import App

Vue.js中该如何自己维护路由跳转记录

前言 在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你当前应用的访问记录,这是非常可怕的事情. 解决方案就是,我们自己来维护一份history跳转记录. 案例与使用场景 代码地址:https://github.com/dora-zc/mini-vue-mall (本地下载) 这是一个基于Vue.js的小型商城案例,应用场景: 自己实现一个Vue插

Vue.js实战之组件的进阶

一.基本用法 在使用 vue-cli 创建的项目中,组件的创建非常方便,只需要新建一个 .vue 文件,然后在 <template> 中写好 HTML 代码,一个简单的组件就完成了 一个完整的组件,除了 <template> 以外,还有 <script> 和 <style> 需要注意的是,<script> 中的 data 必须是函数 然后在其他文件的 js 里面引入并注册,就能直接使用这个组件了 二.使用 slot 分发内容 开发过程中,常常需要

Vue.js实战之通过监听滚动事件实现动态锚点

前言 前几天工作中在做项目的时候,需要实现一个动态锚点的效果,具体效果如下: 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现 在实现平滑滚动之前,得先确保基本的锚点功能 如果没有其他要求,直接用

Vue.js实战之组件之间的数据传递

前言 Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用 props: [