通过标签中的 to 传参
基本语法:
1 | <router-link :to="{name:'xxx', params:{key:value}}">子页面</router-link> |
to
前面带冒号,后面跟一个对象形式的字符串name
:路由配置文件src/router/index.js中起的name值,叫做命名路由params
:要传的参数,是对象形式,可以在对象里传多个值
具体实例:可以参照 子路由-路由嵌套 中的代码修改
- 在父页面src/components/Home.vue里面导航中添加如下代码:
1 | <router-link :to="{name:'one', params:{username: 'test'}}">子页面1</router-link> |
- 在路由配置文件src/router/index.js里添加以下代码,重点是
name
:
1 | { |
- 在子页面src/components/One.vue里接收参数:
1 | <h2>{{$route.params.username}}</h2> |
url中传递参数
- 在路由中以冒号传递,在路由配置文件src/router/index.js里添加代码:
1 | { |
- 在父页面src/components/Home.vue中写入参数:
1 | <router-link to="home/two/1/木子">子页面2</router-link> |
to
前面没有冒号,字符串路由,必须全部匹配
- 在子页面src/components/Two.vue中接收参数:
1 | <p>ID: {{$route.params.id}}</p> |
- 如果路由参数有特定规则,需要加入正则表达式:
1 | { |
params传递参数
- 在路由配置文件src/router/index.js里添加代码:
1 | { |
- 在父页面src/components/Home.vue中写入参数:
1 | //template |
- 在子页面src/components/Three.vue中接收参数:
1 | <p>ID: {{$route.params.id}}</p> |
- 动态路由使用
params
传递参数,在this.$router.push()
方法中path
不能和params
一起使用,否则params
无效,需要用name
指定页面; - 以上方式参数不会显示在浏览器地址栏中,刷新后就获取不到参数了。改进:在路由配置文件中改代码
1 | { |
query传递参数
- 在路由配置文件src/router/index.js里添加代码:
1 | { |
- 在父页面src/components/Home.vue中写入参数:
1 | //template |
- 在子页面src/components/Three.vue中接收参数:
1 | <p>ID: {{$route.query.id}}</p> |
- 动态路由使用
query
传递参数,会显示在浏览器地址栏中,以上链接为/home/three?id=1&name=木子