原文网址:http://jspang.com/2017/04/13/vue-router/
开发中,参数的传递是个最基本的业务需求.通过 URL 地址来传递参数是一个形式,这节课我们就看看 vue-router 为我们提供了那些传递参数的功能.我们先想象一个基本需求,就是在我们点击导航菜单时,跳转页面上能显示出当前页面的路径,来告诉用户你想在所看的页面位置(类似于面包屑导航).
一,用 name 传递参数
前两节课一直出现 name 的选项,但是我们都没有讲,这节课我们讲 name 的一种作用,传递参数.接着上节课的程序继续编写.
两步完成用 name 传值并显示在模板里:
在路由文件 src/router/index.js 里配置 name 属性.
routes: [ { path: '/', name: 'Hello', component: Hello } ]
模板里 (src/App.vue) 用 $router.name 的形势接收,比如直接在模板中显示:
{{$router.name}}
二,通过 <router-link> 标签中的 to 传参
也许你也会觉的上边的传参很不正规,也不方便,其实我们多数传参是不用 name 进行传参的,我们用标签中的 to 属性进行传参,需要您注意的是这里的 to 要进行一个绑定,写成: to.先来看一下这种传参方法的基本语法:
valueString
这里的 to 前边是带冒号的,然后后边跟的是一个对象形势的字符串.
name:就是我们在路由配置文件中起的 name 值.
params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值.
了解基本的语法后,我们改造一下我们的 src/App.vue 里的标签, 我们把 hi1 页面的进行修改.
Hi 页面 1
把 src/reouter/index.js 文件里给 hi1 配置的路由起个 name, 就叫 hi1.
{ path : '/hi1' , name : 'hi1' , component :Hi1},
最后在模板里 (src/components/Hi1.vue) 用 $route.params.username 进行接收.
{ { $ route . params.username}}
总结:
今天我们学习了两种传参的方法,一般会使用第二种方法.我们通过学习也知道了 name 的用途,一种作用是传参,一种作用是在传参时起到名称作用.传参的操作在实际开发中是基本的需求,我们一定要掌握好啊.
来源: http://www.bubuko.com/infodetail-2461045.html