一、用name传递参数
两步完成用name传值并显示在模板里:
在路由文件src/router/index.js里配置name属性。
1234567 | routes: [ { path: '/', name: 'Hello', component: Hello } ] |
模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示:
1 | <p>{{ $router.name}}</p>
|
二、通过<router-link> 标签中的to传参
也许你也会觉的上边的传参很不正规,也不方便,其实我们多数传参是不用name进行传参的,我们用<router-link>标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成:to。先来看一下这种传参方法的基本语法:
1 | <router-link :to="{name:xxx,params:{key:value}}">valueString</router-link> |
这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.name:就是我们在路由配置文件中起的name值。
params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。
了解基本的语法后,我们改造一下我们的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}} |
三:冒号的形式传递参数
在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。
1234 | { path:'/params/:newsId/:newsTitle', component:Params} |
我们需要传递参数是新闻ID(newsId)和新闻标题(newsTitle).所以我们在路由配置文件里制定了这两个值。
在src/components目录下建立我们params.vue组件,也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
123456789101112131415161718 | <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> |
在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。
1 | <router-link to="/params/198/jspang website is very good">params</router-link> | |
四、传统路由跳转(要解析vue变量:to)
23456 | <p>导航 : <router-link to="/">首页</router-link> | <router-link to="/hi">Hi页面</router-link> | <router-link to="/hi/hi1">-Hi页面1</router-link> | <router-link to="/hi/hi2">-Hi页面2</router-link></p> |
五、编程是导航
前进与后退
this.$router.go(-1) 和 this.$router.go(1)
跳转
this.$router.push('/xxx ')
eg:
<button @click="goHome">回到首页</button>
<button @click="goback">后退</button> |
34567891011 | export default { name: 'app', methods:{ goback(){ this.$router.go(-1); }, goHome(){ this.$router.push('/'); } }} |
<button @click="goback">后退</button> |