美文网首页
在vue-router中设置和获取参数的方法

在vue-router中设置和获取参数的方法

作者: 23bdc8ac2543 | 来源:发表于2017-11-25 19:16 被阅读0次

vue-router中传递参数

1.通过设置路由name属性,用{{ $route.name }}获取。

例如:
设置:
{ path: '/', name: ' Home', component: home }
获取:
<p>$route.name</p>

这里要留意的是:
1.{{$route.name}}route的拼写,并不是router。
2.{{$route.name}}中获取的name值是路由中设置的name值


2.通过设置router-link中params,用 {{ $route.params }} 获取。

例如1:
设置:

1.路由:

{ path: 'first', name: 'First - 1', component: first1 }

2.router-link:

<li><router-link :to="{name:'First - 1',params:{id:'first'}}">firstfirst</router-link></li>
获取:

<div>first1 获得参数:{{$route.params.id}}</div>

这里要留意的是:
1.router-link中使用的是to的绑定前面要加“:”。
2.目标路由和目标router-link中需要设相同的name
3.{{$route.name}}route的拼写,并不是router。

例如2:
设置:
1.路由:
{ path: '/:id', component: home }
2.router-link:
<li><router-link to="/first">url-params传参</router-link></li>
获取:
{{$route.params.id}}

这里要留意的是:
1.:id不要忘记了“:”。
2.这里相对于例1不需要在路由中设置name。
3.这里的:id为first。
4.{{$route.name}}route的拼写,并不是router。


3.通过设置router-link中query,用{{ $route.query }}获取。

例如:

设置:
<li><router-link :to="{path:'/',query:{aaa:123}}">query传参</router-link></li>
获取:
<p>{{$route.query.aaa}}</p>

相关文章

  • 在vue-router中设置和获取参数的方法

    vue-router中传递参数 1.通过设置路由name属性,用{{ $route.name }}获取。 例如:设...

  • jQuery获取设置样式

    css();方法 获取或设置样式 对以下html标签进行样式的获取和设置 获取样式 css();方法设置参数,...

  • jQuery里设置获取文本内容

    text();方法获取和设置文本内容 获取文本 text();方法不给参数会获取到这个标签中的所有文本,包括后代元...

  • jmeter设置参数的方法(随机,读csv等)(转)

    本文为整理jmeter设置参数的方法设置参数值的方法有如下几种:1. 用Jmeter中的函数获取参数值,__Ran...

  • 【vue3】开发中遇到的问题

    vue-router route定义中,如何设置可选的params方法:在参数后加引号?带引号,两个路径都能访问不...

  • jQuery设置及获取样式

    设置 获取元素的中的文本:text():方法获取文本时不需要参数。只能获取文本,获取不到文本中包含的标签设置文本时...

  • Vue知识点

    vue-router 在mounted函数中获取从路由地址带过来的参数: 定义动态路由: { path: 'new...

  • jquery2

    1 jquery中如何来获取或和设置属性? attr()方法用来获取和设置属性,removeAttr() 方法用来...

  • Servlet系列之(3)请求参数中文乱码

    POST请求乱码 解决方式: 在调用获取参数值方法前设置request.setCharacterEncoding(...

  • js-URL参数的获取

    1、获取单个参数: 2、获取多个参数: 3、设置单个参数: 4、设置多个参数:

网友评论

      本文标题:在vue-router中设置和获取参数的方法

      本文链接:https://www.haomeiwen.com/subject/knhjittx.html