Vue学习笔记【27】——Vue路由（设置路由）

设置路由高亮

css：

     .router-link-active, /* vue-router*/
     .myactive {
       color: red;
       font-weight: 800;
       font-style: italic;
       font-size: 80px;
       text-decoration: underline;
       
     }

js：

 var routerObj = new VueRouter({
       // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
       routes: [ // 路由匹配规则 
         // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
         //  属性1 是 path， 表示监听 哪个路由链接地址；
         //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
         // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
         // { path: '/', component: login },
         { path: '/', redirect: '/login' }, // 这里的 redirect（重定向） 和 Node 中的 redirect 完全是两码事
         { path: '/login', component: login },
         { path: '/register', component: register }
       ],
       linkActiveClass: 'myactive'
     })

 

设置路由切换动效

css：

 .v-enter,
     .v-leave-to {
       opacity: 0;
       transform: translateX(140px);
     }
 ​
     .v-enter-active,
     .v-leave-active {
       transition: all 0.5s ease;
     }

html：

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

在路由规则中定义参数

1. 在规则中定义参数：

 { path: '/register/:id', component: register }
 ​

2. 通过 this.$route.params来获取路由中的参数：

 var register = Vue.extend({
       template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'
     });
 ​