vue 路由跳转方式

2019-08-15 admin

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

① 不传参

<li >
  <router-link to="user">点击验证动画效果 </router-link>   
</li>

② 跳转时传参

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

<router-link :to="'/user/' + this.id"> <router-link/>

// 接收参数
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() 回退一步

[转载]原文链接:https://segmentfault.com/a/1190000020084110

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72603.html

文章标题:vue 路由跳转方式

相关文章
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
VuePress 快速踩坑
最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePr...
2018-04-27
vue-video-player 更改视频源
背景:根据用户的信息来显示不同的视频源 &lt;template&gt; &lt;div class=&quot;video-box-wrap&quot; v-show=&quot;video.show&quot;&gt; ...
2018-05-05
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
回到顶部