设置选中路由的高亮与切换动画

<router-link to=''/xx'>xxx</router-link>

在选中的路由跳转标签上会自动绑上2个类：.router-link-exact-active和.router-link-active这两个类

所以可以在css中直接操作.router-link-active来给予样式

 

也可以在Vue的实例化中，定义专属的名字

var rtobj=new VueRouter({
        routes: [
            {path:'/',redirect:'/haha'},
            {path:'/haha',component:haha},
            {path:'/xixi',component:xixi}
        ],
        linkActiveClass:'myClass'
})

使用 linkActiveClass 来赋予新的名字用来替换默认的 .router-link-active

其中在linkActiveClass赋予第三方库中的类名

 

 组件之间的切换动画：

<transition appear mode="out-in">
    <router-view></router-view>
</transition>

只需要把<router-view>包裹在<transition>中，在css中设置即可