vue-router 前端路由之路由传值的方式详解

路由传值

在前端的路由里面，我们在切换路由的时候，也相当于切换了页面，页面与页面之前有时候需要做到传值 ，这个时候就需要进行路由传值，在VueRouter里面，两个路由之间做跳转的时候，如何进行传值呢？

普通跨页面传值：

1.通过localStorage

setItem()
getItem()

2.通过search(地址栏 ? 后面的参数)

VueRouter的路由传值

VueRouter的路由传值有两种方式

jquery传值。 类似get传值

传值的路由

this.$router.push({
  path: "/login?uname=" + this.userName
});

传值路由第二种写法

this.$router.push({
  path: "/login",
  query: {
    uname: this.userName
  }
});

接收值的路由

console.log("接收过来的值为：" + this.$route.query.uname);        //这里是$route 没有r
----

params传值 。路径变量传值

params路由传值可以把它理解成express路径变量传值 ，它也可以放在地址栏里面进行传递

传值路由第一种写法（还是会将参数显示在地址栏中）

this.$router.push({
  path: "/login/" + this.userName
});

传值路由的第二种写法（不会将参数显示在地址栏中）

this.$router.push({
  name: "login",
  params: {
    uname: this.userName
  }
});

接收值的路由

console.log("接收过来的值为：" + this.$route.params.uname);

注意：在使用params传递参数的时候，我们需要在router的对象里面，找到当前的这个路由，然后去更改它的 path

{
   path: "/login/:uname", //代表当前url跳转的路径
   component: login, //代表在当前这个路径下面，我们如何显示组件（显示那一个组件）
   name: "login" //给当前路由取一个别名
 }

上面的path后面是 /login/:uname ,这一个是我们的一个路径变量，前面的login代表路由，而后面 :uname 代表的是变量

---

通过第二种方式的params传值 ，引伸出post原理传值

params本身确实是会把参数添加到url地址栏，但是，我们可以让它不显示出来，使用下面的方法，我们就可以把它去掉，不显示，从而内容不经过浏览器地址栏处理，直接做到传值。

它只是把路由对象里面的路径变量给去掉了，直接使用的params传值

注意事项：因为它把path里面的路径变量去掉了，所以不能使用path去传递值了

this.$router.push({
  path: "/login/" + this.userName
});
//现在上面的方法就不可用了，而必须使用下面的方法
this.$router.push({
  name: "login",
  params: {
    uname: this.userName
  }
});

这一个就是vue当中变相去处理post传值

总结

以上所述是小编给大家介绍的vue-router 前端路由之路由传值的方式详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue-router路由懒加载和权限控制详解

    vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo 所以下面介绍下,路由懒加载 1.为什么要使用路由懒加载呢 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效 2.用法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) e

  • 使用vue-router beforEach实现判断用户登录跳转路由筛选功能

    在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求. 实现 本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一

  • vue.js vue-router如何实现无效路由(404)的友好提示

    前言 大家都知道对于单页应用,官方提供了vue-router进行路由跳转的处理,而最近在做一个基于vue-router的SPA,想对无效路由(404)页面做下统一处理. 这次我真的没有在官方文档找到具体的说明[捂脸] 所以本文仅是我DIY的一个思路,求轻虐=_= 在我的理解中,vue-router是根据path去匹配注册的route,匹配到则加载对应的组件,匹配不到则重置(或者说清空)对应的router-view. 所以,我们不做处理的话,最终页面展示的是一片空白. 那么,我们是不是可以在路由匹

  • vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

    此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去. 做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题, 1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登

  • 在vue-cli脚手架中配置一个vue-router前端路由

    前言 这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容,分享出来供打击参考学习,下面来一起看看详细的介绍: 首先你需要一个main.js文件 //然后引入vue-router import VueRouter from 'vue-router'; //使用路由 Vue.use(VueRouter); //当然如果需要有组件进来的时候也是需要引入的 import Home from '../components/Home.vue'; import New

  • 讲解vue-router之什么是动态路由

    讲解vue-router之什么是动态路由

    前言: 今天我来给大家说道说道v-router,这是个什么东西?我们先从动态路由讲起. GitHub:https://github.com/Ewall1106/mall/tree/master 1.动态路由有一个什么适用场景呢? 比如在写商品详情页面的时候,页面结构都一样,只是商品id的不同,所以这个时候就可以用动态路由动态. 2.官方文档 首先我们来看看官方文档上是怎么解释动态路由的?(https://router.vuejs.org/zh-cn/) 你可以在一个路由中设置多段"路径参数&qu

  • Vue-router路由判断页面未登录跳转到登录页面的实例

    如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该

  • vue-router 前端路由之路由传值的方式详解

    路由传值 在前端的路由里面,我们在切换路由的时候,也相当于切换了页面,页面与页面之前有时候需要做到传值 ,这个时候就需要进行路由传值,在VueRouter里面,两个路由之间做跳转的时候,如何进行传值呢? 普通跨页面传值: 1.通过localStorage setItem() getItem() 2.通过search(地址栏 ? 后面的参数) VueRouter的路由传值 VueRouter的路由传值有两种方式 jquery传值. 类似get传值 传值的路由 this.$router.push({

  • iOS利用Block逆向传值的方式详解

    iOS利用Block逆向传值的方式详解

    前言 在iOS通过代理逆向传值的方式详解一文中,分析了如何利用代理模式来逆向传值,其实还有一些其他的方式,如通知.Block等,相比较代理,我个人认为反而要简单些,但是需要处理好细节问题,如Block循环引用.还是用前文的案例,本次使用Block来实现,Block的基本知识本文不再赘述. 一.书写规范 Block传值,需要注意的是,谁传值就需要定义Block,捕获方仅仅需要传递Block给传值方,并处理捕获的值. 传值方 1.定义Block用于传值 2.声明一个上述Block属性,这个属性的具体

  • Vue + Axios 请求接口方法与传参方式详解

    目录 一.Get请求: 二.Post请求: 三.拓展补充 使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传参方法. 一.Get请求: Get请求比较简单,通常就是将参数拼接到url中 用? &连接或者用下面这种方式: this.axios.get(this.getWxQyUserInfoUrl, { params: { agentid: this.doLoginParams.agentid, code: this

  • Vue中定义全局变量与常量的各种方式详解

    前言 本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 global.js 并且在其中定义 let a = 10; 在入口文件中引入 global.js import './global.js' 在项目中使用: a // 报错 发现报错了, a 并没有定义. 为什么? 这个涉及到模块作用域: 1 每一个 js 都相当于

  • iOS通过代理逆向传值的方式详解

    iOS通过代理逆向传值的方式详解

    前言 在iOS开发中,常见的几种逆向传值方式,有代理(delegate).通知(NSNotification),block等等,本文就给大家分析下,如何理解和快速上手代理模式,并以一个简单的逆向传值为案例,看看代理模式是不是很难. 一.代理模式中的几个概念 讲代理模式之前,首先需要弄清楚两个概念:被代理对象和代理对象.并且需要知道它们之间是靠协议关连起来的. 1.被代理对象 被代理对象往往就是真正有做事意图的那个对象,比如卖房子案例中的想卖房子的房主,保姆婴儿案例中想喝奶的婴儿.但是它们自己做不

  • Vue路由对象属性 .meta $route.matched详解

    $route.fullPath 1 路由是:/path/:type真正路径是:/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta:

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

  • Vue-CLI项目中路由传参的方式详解

    一.标签传参方式:<router-link></router-link> 第一种 router.js { path: '/course/detail/:pk', name: 'course-detail', component: CourseDetail } 传递层 <!-- card的内容 { id: 1, bgColor: 'red', title: 'Python基础' } --> <router-link :to="`/course/detail

  • vue前端开发层次嵌套组件的通信详解

    vue前端开发层次嵌套组件的通信详解

    目录 前言 示例 小结 前言 vue父子组件之间通过props很容易的将父组件的值传递给子组件,如果一个组件嵌套很多层,每一层之间度需要同props进行传值,很麻烦,且不易维护 示例 [示例]A组件中使用了B组件,B组件中使用了C组件,C组件需要使用A组件的数据text及使用A组件的方法getmethod.A组件代码如下: <template> <div> <P>这是A组件</P> <v-comb></v-comb> </div

  • React路由拦截模式及withRouter示例详解

    React路由拦截模式及withRouter示例详解

    目录 一.路由拦截 二.路由模式 三.withRouter 一.路由拦截 在前面两篇 路由博客基础上,我们将ReactRouter.js的我的profile路由设置成路由拦截的: <Route path="/profile" render={() => isAuth() ? <Profile/> : <Redirect to="/login"></Redirect> }></Route> 新建Logi

随机推荐