详解vue-router 2.0 常用基础知识点之router.push()

 更新时间:2017年05月10日 11:25:08   作者:NowTheFuture  
本篇文章主要介绍了vue-router 2.0 常用基础知识点之router.push(),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

router.push(location)

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)。

声明式:<router-link :to="...">

编程式:router.push(...)

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。

// 字符串
router.push('home')

// 对象
this.$router.push({path: '/login?url=' + this.$route.path});

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数,变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});

// 设置查询参数
this.$http.post('v1/user/select-stage', {stage: stage})
   .then(({data: {code, content}}) => {
      if (code === 0) {
        // 对象
        this.$router.push({path: '/home'});
      }else if(code === 10){
        // 带查询参数,变成/login?stage=stage
        this.$router.push({path: '/login', query:{stage: stage}});
      }
});

// 设计查询参数对象
let queryData = {};
if (this.$route.query.stage) {
  queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {
  queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});

replace

类型: boolean

默认值: false

设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。

//加上replace: true后,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

this.$router.push({path: '/home', replace: true})
//如果是声明式就是像下面这样写:
<router-link :to="..." replace></router-link>
// 编程式:
router.replace(...)

综合案例

this.$router.push({path: '/coach/' + this.$route.params.id, query: queryData});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue如何实时往数组里追加数据

    vue如何实时往数组里追加数据

    这篇文章主要介绍了vue如何实时往数组里追加数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue draggable组件实现拖拽及点击无效问题的解决

    vue draggable组件实现拖拽及点击无效问题的解决

    这篇文章主要介绍了vue draggable组件实现拖拽及点击无效问题的解决,只需要在设置handle属性就可以了,.defaultTypeTag 是要拖拽的块的类名,要注意的是需要做点击事件的项不能包含在这个类名里面,不然会无法触发点击事件,详细解决办法跟随小编一起学习吧
    2022-05-05
  • vue+echarts实现进度条式柱状图

    vue+echarts实现进度条式柱状图

    这篇文章主要为大家详细介绍了vue+echarts实现进度条式柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue-cli3.0如何使用CDN区分开发、生产、预发布环境

    vue-cli3.0如何使用CDN区分开发、生产、预发布环境

    这篇文章主要介绍了vue-cli3.0如何使用CDN区分开发、生产、预发布环境,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue3 keep-alive实现tab页面缓存功能

    vue3 keep-alive实现tab页面缓存功能

    如何在我们切换tab标签的时候,缓存标签最后操作的内容,简单来说就是每个标签页中设置的比如搜索条件及结果、分页、新增、编辑等数据在切换回来的时候还能保持原样,这篇文章介绍vue3 keep-alive实现tab页面缓存功能,感兴趣的朋友一起看看吧
    2023-04-04
  • vue3+element 分片上传与分片下载功能实现方法详解

    vue3+element 分片上传与分片下载功能实现方法详解

    这篇文章主要介绍了vue3+element 分片上传与分片下载功能实现方法,结合实例形式详细分析了vue3+element 分片上传与下载相关实现技巧与操作注意事项,需要的朋友可以参考下
    2023-06-06
  • element-ui修改el-form-item样式的详细示例

    element-ui修改el-form-item样式的详细示例

    在使用element-ui组件库的时候经常需要修改原有样式,下面这篇文章主要给大家介绍了关于element-ui修改el-form-item样式的详细示例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue中的inject用法及说明

    vue中的inject用法及说明

    这篇文章主要介绍了vue中的inject用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue3+Vite如何解决“找不到模块“@/components/xxx.vue”或其相应的类型声明ts(2307)”

    Vue3+Vite如何解决“找不到模块“@/components/xxx.vue”或其相应的类型声明ts(2307)”

    在Vue项目中使用Vite时,可能因版本差异而需修改tsconfig.app.json而非tsconfig.json以解决编译错误,本文分享个人解决经验,供参考
    2024-10-10
  • vue把输入框的内容添加到页面的实例讲解

    vue把输入框的内容添加到页面的实例讲解

    在本篇文章里小编给大家整理的是关于vue把输入框的内容添加到页面的实例以及相关知识点,需要的朋友们学习下。
    2019-11-11

最新评论