当前位置:首页 > 编程教程 > vue技术文章 > 详解vue-router传参的两种方式

实例讲解vue-router传参的两种方式

  • 发布时间:
  • 作者:码农之家
  • 点击:156

这篇文章主要知识点是关于vue-router传参、vue-router、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js实战
Vue.js实战高质量扫描版
  • 类型:Vue大小:196.7 MB格式:PDF作者:梁灏
立即下载

详解vue-router传参的两种方式

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

  1. 嵌套的路由/视图表
  2. 模块化的、基于组件的路由配置
  3. 路由参数、查询、通配符
  4. 基于 Vue.js 过渡系统的视图过渡效果
  5. 细粒度的导航控制
  6. 带有自动激活的 CSS class 的链接
  7. HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  8. 自定义的滚动条行为

vue-router传参两种方式:params和query

params、query是什么?

    params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params
     query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

方法1:

    query 方式传参和接收参数

    传参:      

this.$router.push({
       path:'/openAccount',
       query:{id:id}
     });

     接收参数:

        this.$route.query.id

     注意:传参是this.$router,接收参数是this.$route
     两者区别:

        $router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

        $route为当前router跳转对象,里面可以获取name、path、query、params等

方法2:

    params方式传参和接收参数

    传参:

  this.$router.push({
       name:'/openAccount',
       params:{
         id: id
       }
     })

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

    注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

    二者还有点区别,可以理解为:query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

router.js

export default new Router({
 routes: [
  {
   path: '/',
   name: 'login',
   component: Login
  },
  {
   path: '/register',
   name: 'register',
   component: Register
  }
})

组件(传参):

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
  <button @click="routerTo">click here to news page</button>
 </div>
</template>
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 methods:{
  routerTo(){
   this.$router.push({ name: 'register', params: { userId: 123 }});//params方式 这里的name值是在定义route.js时中的name
   //this.$router.push({ path: '/register', query: { userId: 123 }});  //query方式 
  }
 }
}
</script>
<style>
</style>

组件(接收参数)

<template>
 <div>
  {{this.$route.params.userId}}或者{{this.$route.params.userId}}
 </div>
</template>
<script>
</script>

总结

以上所述是小编给大家介绍的vue-router传参的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.977566

vue-router中的hash和history两种模式的区别

众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别。 hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash;} 上面的代码可以通过改变hash来改变页面字体颜色,虽然没什么用,但是一定程度上说明了原理。 更关键的一点是,因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了,同时点击后退时,页面字体颜色也会发生变化。这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来,后来人们给它起了一个霸气的名字叫前端路由,成为了单页应用标配。 网易云音乐,百度网盘就采用了hash路由,看起来就是这个样子: http://music.163.com/#/friend……

网友NO.308571

vue-router相关基础知识及工作原理

前言 今天面试被问到 vue的动态路由,我竟然没有回答上来,感觉不是什么难得问题。好久没有看vue-router的文档,很多用的东西和概念没有对上。回来一看什么是动态路由就傻眼了。看来有必要把vue -router相关知识总结一下,好丢人的感觉。 单页面应用的工作原理 我理解的单页面工作原理是通过浏览器URL的#后面的hash变化就会引起页面变化的特性来把页面分成不同的小模块,然后通过修改hash来让页面展示我们想让看到的内容。 那么为什么hash的不同,为什么会影响页面的展示呢?浏览器在这里面做了什么内容。以前#后面的内容一般会做锚点,但是会定位到一个页面的某个位置,这个是怎么做到的呢,和我们现在的路由有什么不同。(我能想到一个路由的展示就会把其他路由隐藏,是这样的吗)后面会看一看写一下这个疑惑,现在最重要的是先把基本……

网友NO.747796

浅谈vue项目4rs vue-router上线后history模式遇到的坑

此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式。因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了。打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成‘./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的。无奈之下死马当活马医,把‘./'改回了‘/'在history模式 下再次打包上线,发现点击跳转页面都是正常的,有些小激动。但是history模式的通病就是不能刷新, 因为原来跳转时其实不是通过请求服务器的,而是通过js操作history的API改变地址完成的。 当你刷新了之后浏览器就耿直的去请求服务器了,然而服务器没有这个路由,于是就404了。 解决方法1: 可以做个代理……

网友NO.605522

vue-router路由参数刷新消失的问题解决方法

场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并在主页显示数据。但是刷新页面后,数据就消失了。 解决方案: 1、sessionnbsp;如果项目采用前后端分离思想,服务器只提供接口,不进行服务器渲染,那么这种办法是行不通了。 2、$route.query 我们可以在路由跳转的时候带上登录请求的参数: router.push({name:'index', query:{username: 'xxx', password: 'xxxxxx'}})...this.$ajax({ url: 'xxx', method: 'post', data: { username: this.$route.query.username, password: this.$route.query.password }}) 这样登录参数会被保存在url中,像这样:“http://xxx.xxx.xxx/index?username=xxxlt;script function setCookie (name, value, exdays) { let date = new Date() date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000)) let expires = "expires=" + date.toGMTString() document.cook……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

投诉 / 推广 / 赞助:QQ:520161757