1、有2种方式去传参,如下代码:

<template>
<div>
    <div>这里是首页</div>
    <router-link :to="{name:'reg',params:{user:text}}">注册reg</router-link>
    <router-link :to="'/reg/'+text">注册reg</router-link>
</div>
</template>
<script>
export default {
    name:"Hello",
    data(){
        return {
            text:"首页传递数据"
        }
    }
}
</script>
<style>
</style>

  特别需要注意的是:传参的时候,to属性必须绑定,即  :to=  ,冒号必须有。否则如下图

  同时需要注意template下的根标签只能有一个哦,否则会报错。

  无:

  有:

  所以平时我们书写的时候不管怎样,都带上冒号就可以啦。

  从图中可以看到:当使用对象形式的时候,是为我们进行了转码;当使用字符串拼接的时候,是直接显示数据。

  传递多个参数:

<router-link :to="'/detail/'+title+'/'+price"  class="goods-list-link">
{
   path:"/detail/:id/:title",
   name:"detail",
   component:detail
}
<p>{{this.$route.params.id}}</p>
<p>{{this.$route.params.title}}</p>

  2、也是2种方式接受参数

<template>
<div>
    <div>{{$route.params.user}}</div>
    <button @click="write">打印接收的参数</button>
</div>
</template>
<script>
export default {
    name:"reg",
    data(){
        return {
            status:true
        }
    },
    methods:{
        write(){
            console.log(this.$route.params.user);
        }
    }
}
</script>
<style>
</style>

  3、路由配置:

  注意:如果传递参数,必须采用动态路由匹配,否则无法跳转。所以reg的path后面必须跟上:user

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import home from '@/pages/home'
import detail from '../pages/goodsDetail'

import Hello from '@/components/Hello'
import reg from '@/components/reg'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },{
        path:"/reg/:user",
        name:"reg",
        component:reg
    }
  ]
})

vue-cli 配置路由之间跳转传递参数的更多相关文章

  1. vue 路由 及 跳转传递参数的总结

    博客地址:https://ainyi.com/4 vue-router vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基 ...

  2. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

  3. vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面

    vue如何配置路由 .获取路由的参数.部分刷新页面.缓存页面:http://www.mamicode.com/info-detail-1941546.html vue-router传递参数的几种方式: ...

  4. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  5. vue不通过路由直接获取url中参数的方法示例

    vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...

  6. Vue编程式路由跳转传递参数

    Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...

  7. Vue的自定义组件之间的数据传递

    一,父级传向子级 1,在子级的属性中添加props:['myname',......],参数可以传多个,看具体而定: 2,在父级data中定义好需要传递的变量数据,例如name:"rose& ...

  8. vue.js关于路由的跳转

    1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 route ...

  9. [转] 微信小程序 页面跳转 传递参数

    本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...

随机推荐

  1. review的一个收获popstate,addEventListener:false ,split,jquery cache

    一.popstate:记录url历史变化 二.document.location.hash:锚点后面的东西 三.addEventListener:false 是否在捕获或者冒泡事件中执行 强转换 四. ...

  2. selenium+python自动化80-文件下载(不弹询问框)【转载】

    转至博客:上海-悠悠 前言 上一篇是点弹出框上的按钮去保存文件,本篇介绍一种更加优雅的方法,加载Firefox和Chrome的配置文件,不弹出询问框后台下载. 一.FirefoxProfile 1.点 ...

  3. 爬虫基础库之requests

    requests Python标准库中提供了:urllib.urllib2.httplib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作, ...

  4. [转]windows消息机制(MFC)

    消息分类与消息队列 Windows中,消息使用统一的结构体(MSG)来存放信息,其中message表明消息的具体的类型, 而wParam,lParam是其最灵活的两个变量,为不同的消息类型时,存放数据 ...

  5. IIS 安装问题

    今天去客户现场的内网环境安装IIS,结果第一步尴尬,是虚拟机搭出来,安装时没有源文件,然后让那边运维给系统盘挂上了,第一步通过了,可以安装了,但是由于之前也没吝啬,啥都点了,这次就合计不用那么多,结果 ...

  6. JavaScript如何判断变量是数组还是对象

    编辑 方法一:通过判断变量的类型,并且变量的length属性(除了有一种例外是arguments对象–当给函数传参时数据存储的地方) var arr=[2,3,4]; var obj={"n ...

  7. websocket小荔枝

    关于websocket原理和好处请参考百度,这里只是代码. var ws = new WebSocket('ws://echo.websocket.org/'); ws.onopen = functi ...

  8. CentOS7安装和配置vsftpd

    (1)vsftpd基本介绍 作用:实现文件共享 1)vsftpd两种模式 主动模式 所谓主动模式,指的是FTP服务器"主动"去连接客户端的数据端口来传输数据,其过程具体来说就是:客 ...

  9. RabbitMQ (八) 队列的参数详解

    代码中,我们通常这样声明一个队列: //声明队列 channel.QueueDeclare ( queue: QueueName, //队列名称 durable: false, //队列是否持久化.f ...

  10. 【SpringMVC】一次处理项目中文乱码的经历

    一次处理项目中文乱码的经历 背景 今天把旧服务器上的项目转移到新服务器上,结果返回的json中的中文乱码了,觉得很奇怪,因为新服务器和旧服务器都是TX云,也不会有太大区别呀,于是乎开始了为期半天的蛋疼 ...