标签：set outer sans 表达 idt com roi over 语法
Vue 2.0 路由传递参数
Vue 路由传递参数 有两种方式：
两步完成用name传值并显示在模板里：
|
1
2
3
4
5
6
7
|
routes: [
{
path: ‘/‘,
name: ‘Hello‘,
component: Hello
}
]
|
|
1
|
<p>{{ $route.name}}</p>
|
上边的传参或许很不正规，也不方便，其实工作中多数传参是不用name进行传参的，我们用<router-link>标签中的to属性进行传参，需要注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：
|
1
|
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
|
这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.
了解基本的语法后，我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。
|
1
|
<router-link :to="{name:‘hi1‘,params:{username:‘jspang‘}}">Hi页面1</router-link>
|
把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.
|
1
|
{path:‘/hi1‘,name:‘hi1‘,component:Hi1},
|
最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.
|
1
|
{{$route.params.username}}
|
在路由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。
|
1
2
3
4
|
{
path:‘/params/:newsId/:newsTitle‘,
component:Params
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<template>
<div>
<h2>{{ msg }}</h2>
<p>新闻ID：{{ $route.params.newsId}}</p>
<p>新闻标题：{{ $route.params.newsTitle}}</p>
</div>
</template>
<script>
export default {
name: ‘params‘,
data () {
return {
msg: ‘params page‘
}
}
}
</script>
|
|
1
|
<router-link to="/params/198/jspang website is very good">params</router-link> |
|
上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。
加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。
|
1
|
path:‘/params/:newsId(\\d+)/:newsTitle‘,
|
加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。
标签：set outer sans 表达 idt com roi over 语法
原文地址：http://www.cnblogs.com/zccblog/p/7235779.html
