vuerouter3种模式_Vue-router的三种传参方式

第一种传递参数：name传参

两步完成name传参并显示在模板中；

第一在router/index.js中配置name属性，

routes: [

{

path: '/',

name: 'HelloWorld',

component: HelloWorld

},

]

第二步在src/App.vue接收

{{ $route.name }}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

第二种参数传递方式 通过标签中的to传递

首先在src/App.vue中添加

hello

然后在router/index.js中添加name

{

path: '/hello',

name: 'hello',

component: hello,

alias: '/dongtian' //别名

},

最后在hello.vue页面接收

{{ $route.params.userName}}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

第三种 利用rul传递参数

首先在router/index.js路由中以冒号的形式传递参数，配置路由如下

{

path: '/params/:Id(\\d+)/:title', //只能是数字

component: params

}

然后在params模块利用$route接收参数

Id: {{ $route.params.Id}}

title: {{ $route.params.title}}

最后在src/App.vue模块中的 标签中利用rul传值

params

vue路由router的三种传参方式

方法三: 传参页面传递参数方式: this.$router.push({ path: 'indexTwoDetails', query: { "id": id } }) 接受参数页 ...

浅谈C++三种传参方式

浅谈C++三种传参方式 C++给函数传参中,主要有三种方式:分别是值传递.指针传递和引用传递. 下面通过讲解和实例来说明三种方式的区别. 值传递 我们都知道,在函数定义括号中的参数是形参,是给函数内专 ...

vue的三种传参方式

vector作为参数的三种传参方式

c++中常用的vector容器作为参数时,有三种传参方式,分别如下(为说明问题,用二维vector): function1(std::vector<:vector> ...

vector做形参时的三种传参方式

vector在做形参的时候传参的方式和普通的变量是一样的,要么传值.要么传引用.要么传指针. 现在分别定义三个以vector为形参的函数: (1) fun1(vector v) ...

c&num; 三种传参方式 in&comma;out&comma;ref

in:默认方式,传值不返回 out:不传值 但是会返回新值给予传参对象 ref:传存储地址,所以传参前必须赋值初始化,传值后的运算结果直接作用在传参上 Out和ref的效果差不多

PHP四种传参方式

test1界面:

testPHP

随机推荐

asp&period;net MVC 帮助助手和函数&lpar; &commat;helper &commat;functions&rpar;

asp.net Razor 视图具有.cshtml后缀,可以轻松的实现c#代码和html标签的切换,大大提升了我们的开发效率.但是Razor语法还是有一些棉花糖值得我们了解一下,可以更加强劲的提升我们 ...

POJ 3304 Segments (直线与线段是否相交)

题目链接 题意 : 能否找出一条直线使得所有给定的线段在该直线上的投影有一个公共点. 思路 : 假设存在一条直线a使得所有线段在该直线上的投影有公共点,则必存在一条垂直于直线a的直线b,直线b与所有线 ...

java利用poi导出数据到excel

背景: 上一篇写到利用jtds连接数据库获取对应的数据,本篇写怎样用poi将数据到处到excel中,此程序为Application 正文: 第三方poi jar包:poi驱动包下载 代码片段: /** ...

git只添加指定类型的文件的&period;gitignore规则

#忽略根目录下的所有文件 * #忽略子目录下的所有文件 /* #包含目录 !*/ #指定不忽略的文件 !*.c !*.h #忽略根目录下的文件 /build/ /appveyor/ /pear/ /s ...

mysql 原理 ~ 事务隔离机制

简介: 事务隔离知多少内容  一 基础知识  1 事务特性 ACID   A 原子性 C 一致性 I 隔离性 D 持久性  2 并行事务出现的问题    1 脏读 读取了其他事务未提交的数据      ...

js高级-原型链

JavaScript是基于原型的面向对象的语言(相当于一个基类,父类),而不是像Java通过类模板构造实例,通过原型实现属性函数的复用 函数都有 prototype属性 指向函数的原型对象 只有函数根 ...

jmeter 中 浮点数计算精度问题

jmeter 中 浮点数计算精度问题解决方法: 编写 beanshell 时使用 java.math.BigDecimal 方法构造,使用 BigDecimal 并且一定要用 String 来够造. ...

vue 获取后端数据打印结果undefined问题

今天做项目时后端有一个要展示到页面上的附件需要前端获取,我获取到了那个附件的信息,但打印fj.name或fj.url时控制台就会显示undefined,后来才发现是json数据没有解析对,应该使用JS ...

1&period;CentOS6&period;5下的基础DNS配置

常规DNS的安全和配置1.安装DNSyum -y install bind bind-utils安装后生成的文件,我们主要配置下面几个/etc/named.conf/var/named/xx这个xx是 ...