vue 路由跳转方式

BothEyes1993 发布于2019-08-26 10:48 / 990人阅读

摘要：方式一标签跳转不传参点击验证动画效果跳转时传参先要配置路由接收参数方式二事件跳转描述跳转到不同的，但这个方法会向栈添加一个记录，点击后退会返回到上一个页面。方式四描述相对于当前页面向前或向后跳转多少个页面类似。

1、方式一：标签跳转 router-link

① 不传参


  点击验证动画效果

② 跳转时传参

// 先要配置路由
path: "/user/:id"

 

// 接收参数
this.$route.params.id

2、方式二：事件跳转 this.$router.push()

描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
用法：

① 字符串

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

② 对象

this.$router.push({path:"/home"})

③ query 传参，相当于get请求，页面跳转时参数会在地址栏中显示，通过this.$route.query.id获取

// 变成 /user?id=2
this.$router.push({ 
    path:"/user",
    query:{
        id:this.id
    }
})

④ params 传参，相当于post请求，页面跳转时参数不会在地址栏中显示,通过this.$route.params.id获取

this.$router.push({ 
    path:"/user",
    params:{
        id:this.id
    }
})

注：传参是 router，接收参数是 route

3、方式三：this.$router.replace{path:"/user"}

描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

4、方式四：this.$router.go(n)

描述：相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面。

// 在浏览器记录中前进1步，相当于history.forward()
this.$router.go(1)

// 后退一步记录，等同于history.back()
this.$router.go(-1)

// 前进三步记录
this.$router.go(3)

// 如果history记录不够用，就会失败
this.$router.go(100)
this.$router.go(-100)

5、this.router.forward() 前进一步 6、this.router.back() 回退一步

海外云主机云服务器 Vue_Vue Vue vue3 学习笔记 (五)——vue3 _vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106814.html

vue常用操作及学习笔记（路由跳转及路由传参篇）

摘要：也可以从其他文件进来定义路由每个路由应该映射一个组件。其中可以是通过创建的组件构造器，或者，只是一个组件配置对象。路由跳转 - 超链接方式跳转 html： Hello App! Go to Foo Go to Bar router.js...

megatron 2019-08-23 11:27 评论0 收藏0
vue 路由进阶

摘要：接收路由的路由传参数的三种方式布尔模式表明将作为传递到匹配的组件中。元信息可在路由对象中配置属性，是一个对象。路由可向路由匹配的组件传递参数，不同情况向组件传递不同的参数，从而实现组件的复用。路由向组件传递参数和路由匹配的组件可以在组件中使用 $route 获取路由上的参数：传参方式 :、params和query :在路径传递参数 { path: /argu/:id/...

张宪坤 2019-08-23 18:09 评论0 收藏0
【Vue.js 牛刀小试】：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

摘要：而路由则是使用了中新增的事件和事件。总结这一章主要是介绍了如何使用在中构建我们的前端路由。系列目录地址一、基础知识概览第一章 - 一些基础概念（posted at 2018-10-31）第二章 - 常见的指令的使用（posted at 2018-11-01）第三章 - 事件修饰符的使用（posted at 2018-11-02）第四章 - 页面元素样式的设定（posted a...

cpupro 2019-05-22 19:26 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

tommego 2019-08-23 12:55 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

jhhfft 2019-08-02 11:56 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

frontoldman 2019-08-29 17:11 评论0 收藏0