字符串(string)。有时候，通过一个名称来标识一个路由显得更加方便，特别是在链接一个路由，或者是执行一些跳转的时候。同样，这里的name也对应了routes配置中给某个路由设置名称的name值：
要链接到一个命名路由，可以给router-link的to属性传一个对象：
<router-link :to="{name:'Order', params: { userId: 123 }}"> </router-link>
用在调用router.push()中也是一回事：
this.$router.push({ name: 'Order', params: { userId: 123 }})
3、$route.params
对象(object)。路由跳转携带参数：
this.$router.push({ name: 'Order', params: { userId: 123 }}) console.log(this.$route.params.userId); //123
4、$route.query
对象(object)。可访问携带的查询参数：
this.$router.push({name: 'login', query:{name: 'userName'}}); this.$route.query.name; //you //此时路由为:
5、$route.redirectedFrom
字符串(string)。重定向来源：
如：{ path: '*',redirect: {name: 'hello'}}
此时访问不存在的路由#/a会重定向到hello，
在hello访问this.$route.redirectedFrom; 输出“/a”。
6、$route.matched
数组(array)。当前路由下路由声明的所有信息，从父路由(如果有)到当前路由为止。
7、$route.hash
字符串(string)。当前路径的hash值。
四、vue监听$route的方式
watch：{‘$route' (to, from) {}}
route 的变化。watch中监听的对象默认回调函数中的参数值就是newVal,oldVal。作为 $route 属性来说当然也就是 to 和 from 的概念了。
Vue用router.push(传参)跳转页面，参数改变，在跳转后的路由观察路由变化，进行页面刷新，可对“from->to”的过程设置动画效果。
该功能的难点就在于怎样获取“上一页”和“下一页”,即怎样分辨是“前进”还是“后退”？
例：
// watch $route 决定使用哪种过渡 watch:{ '$route' (to, from) { //此时假设从index页面跳转到pointList页面 console.log(to); // "/pointList" console.log(from); // “/index” const routeDeep = ['https://www.jb51.net/', '/index','/pointList', '/settLement']; const toDepth = routeDeep.indexOf(to.path) const fromDepth = routeDeep.indexOf(from.path) this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right' } },
to、from是最基本的路由对象，分别表示从(from)某个页面跳转到(to)另一个页面,to.path（表示要跳转到的路由地址），from.path同理。
定义routeDeep数组，将路由目录按层级依次排序(暂不考虑嵌套路由的情况)，复杂单页应用里，同一层级（如同一页面上的多个导航按钮）顺序随意，然后依次排列每个导航的下一页、下下页…即保证每个“上一页”在“下一页”前面。
总结下来就是：按照routeDeep数组里定义的路由目录的顺序，“toDepth > fromDepth”表示“上一页”跳转到“下一页”，同理可由此判断是“前进”还是“后退”。
五、Vue2.0中transition组件的使用
<transition :name="transitionName"> <router-view></router-view> </transition>
transition中有name属性用于替换vue钩子函数中的类名。
transition中只能有一个子元素并且该子元素需要有v-show或者v-if来控制是否显示。
过渡CSS类名
transition中的name属性用于 替换 vue钩子函数中的类名transitionName-
transitionName-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
transitionName-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。
transitionName-leave:定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
transitionName-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。
this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
在“watch $route”中，判断页面跳转的“前进”和“后退”时，决定用不同的过渡效果（fold-left还是fold-right）。
六、animation、transform动画效果实现
在上一个主题中，判断页面跳转路径之后，为两种跳转的transition设置不同的类名“fold-left”、“fold-right”。
然后在CSS中，为两种类名设置不同的动画效果(这里以“左滑动”和“右滑动”为例)：