vue-cli 配置路由之间跳转传递参数

  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=  ,冒号必须有。否则如下图

  无:

  有:

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

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

  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
    }
  ]
})

原文地址:https://www.cnblogs.com/goloving/p/8710168.html

时间: 2024-11-10 15:43:13

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

jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)

Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar"> <header data-role="header"> <h1>Bar</h1> </header> <!-- /header --> <div role="main" class=

vue中Npm run build 根据环境传递参数方法来打包不同域名

项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx   ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 1 2 3 4 5 6 7 'use st

cli下的php(并传递参数)

传递参数有两种方式: 第一种使用文件操作,STDOUT作为标准输出,STDIN作为标准输入 使用fwrite($file,$string)作输出,使用fgets($file)作输入.这种应该算是继承自c语言. fwrite(STDOUT,"hello from cli,Enter your name:"); $name = trim(fgets(STDIN)); fwrite(STDOUT,"hello,$name!"); 第二种使用两个变量 $argv数组接受参数

jsp页面跳转传递参数/抓取参数

1.通过url路径传递参数 var name='job'; var age=18; window.open($.WEB_ROOT+ '/nihao/search/infomation.jsp?name='+name+'&age='+age); jsp中页面抓取 <script type="text/javascript"> $(function() {  var name= '<%=request.getParameter("name")%

Vue 路由跳转传递参数,子组件页面刷新后数据不丢失

原文地址:https://www.cnblogs.com/yscec/p/12408492.html

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

1.路由配置:所有的启动文件都在最初始的main.js文件里面,这个文件中首先需要引入: 2.路由文件配置说明: 3.如何获取页面url的参数? this.$route.query 4.页面之间之间的跳转? 5.返回历史记录页面 6.在项目中遇到的问题: 如何做到页面的部分刷新,如果做到部分页面进入的时候需要刷新,部分页面需要缓存? 首选需要了解keep-alive,在路由配置中增加如下代码: { "path": "/test", "component&q

Nodejs路由之间的数据传递

实例是模拟登录页面提交表单,然后根据信息判断是否登录成功 login.js var express =require('express'); var router =express.Router(); router.get('/',function(req,res,next){ res.render("login.jade"); }); module.exports = router; login.jade doctype html html head meta(http-equiv=

vue打开到新页面,并传递参数

打开新页面,有两种方式, 一种是标签式: <router-link tag="a" target="_blank" :to="{path: '/edit', params: {id: '000'}}"> 一种是函数编程式: let routeData = this.$router.resolve({ path:'/edit', query:{id: '000'} }); window.open(routeData.href, '_bl

vue-router路由传递参数 + get传值query获取

[步骤] (1)路由配置 或者 (2)传递参数 或者 (3)接收传递参数 或者 [二]步骤小结 [三]参数形式 (1)上面这种是/100形式传递过去 (2)另外还有?count=100的格式,这便是get传值,如下所示,看[四] [四]get传值 除了路由传值,也可以使用get传值 获取get传值 this.$route.query . 原文地址:https://www.cnblogs.com/jianxian/p/11965685.html