如何参数传递
方法一(不常有)、使用name传递参数。两步完成用name传值并显示在模板中
第一步:在路由文件中src/router/index.js里配置name的属性
routers:[ { path:'/', name:'Hello', component:Hello } ]
第二步,模板里(src/App.vue)用 $route.name 来接收参数,比如直接在模板中展示
<p>{{ $route.name }}</p>
方法二:使用<router-link :to="{name:'xxx',params:{key:value}}"></router-link>
首先在App.vue中设置模板
<router-link :to="{name:'child1',params:{username:'zwt',id:'1008'}}">child1</router-link> //一定要注意这里的name值就是路由中设置的name值,名字一定要一样
在child1.vue中接收参数:
<p>{{ $route.params.username }}</p> <p>{{ $route.params.id }}</p>
name的用途:一种使传参。一种作用是传参时起到名称的作用。
单页面多路由的操作
实际需求就是这样的,在一个页面里我们有2个以上的<router-view>区域,我们通过配置路由的js文件,来操作这些区域的内容。比如我们在App.vue里加上两个<router-view>标签。我们用vue-cli建立的新项目,并打开了src目录下的App.vue文件,在<router-view>先新写了两行<router-view>标签,并加入一些css样式。
<router-view name="left" style="float:left;widht:50%;background-color:#ccc"></router-view> <router-view name="right" style="float:right;width:50%;background-color:#c0c;"></router-view>
现在在App.vue中有3个<router-view>标签了,也就是我们需要在路由配置这三个区域,配置主要是在components字段里进行
1 import Vue from 'vue' 2 import Router from 'vue-router 3 import Hello from '@/components/hello' 4 import Hi1 from '@/components/hi1' 5 import Hi2 from '@/components/hi2' 6 7 Vue.use(Router) 8 9 export default new Router({ 10 mode:'history', 11 routes:[ 12 { 13 path:'/', 14 components:{ 15 default:Hello, 16 left:Hi1, 17 right:Hi2 //注意这里的left、right是App.vue中的router-view中定义的name属性值 18 } 19 }, 20 { 21 path:'/hi', 22 components:{ 23 default:Hello, 24 left:Hi2, 25 right:Hi1 26 } 27 } 28 ] 29 }) 30
上边的代码我们编写了两个路径,一个是默认的路径'/'另一个是'/hi'这两个路径下的components里面,我们对三个区域都定义了显示内容。定义好后,我们需要在components文件夹下,新建Hi1.vue和Hi2.vue页面就可以了。
Hi1.vue
1 <template> 2 <div>{{msg}}</div> 3 </template> 4 <script> 5 export default{ 6 name:'hi1', 7 data(){ 8 return { 9 msg:'I am hi1!' 10 } 11 } 12 } 13 </script>
Hi2.vue
<template> <div>{{msg}}</div> </template> <script> export default{ name:'hi2', data(){ return{ msg:'I am hi2' } } } </script>
最后,在App.vue中配置我们的<router-link>
<router-link to='/'>首页</router-link> <router-link to='/hi'>Hi页面</router-link>
vue-router使用url传递参数
一、使用:冒号的形式传递参数。我们可以在配置路由文件里的path属性值以冒号:的形式传递参数。这就是对参数的绑定。
{ path:'/params/:newsId/:newsTitle', component:Params }
我们需要传递的参数是新闻ID(newsId)和新闻标题(newsTitle),所以我们在路由配置文件里制定了这个两个值
在src/components目录下建立了我们的params.vue组件。也可以说是页面。我们在页面里输出了url传递的新闻Id和新闻标题
<template> <div> <p>这里是通过url传递参数,此页面通过$route.params.newsId来接收参数</p> <p>newsId:{{ $route.params.newsId }} </p> <p>newsTitle:{{ $route.params.newsTitle }}</p> </div> </template>
<script>
export default{
name:'params',
data(){
return{
}
}
}
</script>
在App.vue文件中加入我们的router-link标签。这时候可以直接通过url传值了
<router-link to="/params/123/helloworld">params</router-link>
正则表达式在URL传值中的应用
如果我们希望传递的新闻ID只能是数字的形式,这时候我们就需要在传递时有个基本的基本的类型判断。vue是支持正则的
加入正则需要在路由配置文件里(src/router/index.js)以圆括号的形式加入
path:'/params/:newsId(\\d+)/:newsTitle',
加入了正则,我们再传递数字之外的其他参数,params.vue组件就没有办法接收到
vue-router中的重定向--redirect
redirect基本重定向
我们只要在src/router/index.js把原来的component换成redirect参数就可以了。
export default new Router({ routes:[ { path:'/' component:Hello }, { path:'/gohome', redirect:'/' //这里是指点击gohome直接进入首页 }, ] })
这里我们设置了gohome路由,但是它并没有配置任何组件,而是直接redirect到path:'/'下了。这就是一个简单的重定向
重定向时传递参数
{ path:'/news/:newsId(\\d+)/:newsTitle', component:News } { path:'/goparams/:newsId(\\d+)/:newsTitle', //这里是指点击goparams跳转到news页面,带参数的跳转 redirect:'/news/:newsId(\\d+)/:newsTitle' }
已经有了一个news路由配置,我们在设置了一个goparams路由的重定向,并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数的接收和正常的路由接收方法一样
alias别名的使用
使用alias也可以实现重定向的效果
1、首先我们要在路由配置文件里src/router/index.js,设置一个别名
{ path:'/hi1', component:Hi1, alias:'/zwt' }
2、配置我们的<router-link>,起锅别名之后,可以直接使用<router-link>标签里的to属性,进行重定向
<router-link to='/zwt'>zwt</router-link>
redirect和alias的区别
redirect:观察url,redirect是直接改变了url的指,把url变成了真实的path路径。
alias:url路径没有改变,这种情况更友好,让用户知道自己访问的路径,只是改变了<router-view>的内容
路由的过渡动画
<transition>标签
想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签。标签还需要一个name属性
<transition name="fade"> <router-view></router-view> </transition>
我们在src/App.vue文件里添加了<transition>标签,并给标签起了一个名字叫fade
css过渡名,组件过渡过程中,会有四个css类名进行切换,这四个类名与transition的name属性有关,比如name=“fade”会有如下四类css类名: