vue笔记-18（路由高亮和路由动画）

作者: 7ColorLotus | 来源:发表于2020-10-10 10:52 被阅读0次

vue笔记-18（路由高亮和路由动画）
Vue 学习笔记 vue-router路由和前端状态管理
vue 路由高亮
vue路由高亮
前端系统学习 10. Vue高级用法
vue路由的介绍（二）--vue动态路由和get的传值
vue06
Vue应用
Vue 路由/动画
vue路由动画

设置选中路由高亮的两种方式

给.router-link-active设置高亮的样式
```
.router-link-active{
    color: red;
}
```

自定义选中时的class名称,然后对自定义的类高亮修饰

var routerObj = new VueRouter({
    //route //这个配置对象中的route表示【路由匹配规则】的意思
    routes: [
        { path : '/', component: login },
        { path : '/', redirect: '/login' } //这里和node中的redirect两码事
    ],
    linkActiveClass: 'myactive'
})

路由切换添加动画：直接使用<transtion>元素包上router-view元素即可实现简单的动画

路由高亮和路由动画演示代码

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02vue-router选中高亮显示</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <script src="./lib/vue-router.js"></script>

  <!-- routerlink默认选中样式为router-link-active -->
  <style>
      .router-link-active{
          color:red;
          background-color: green;
          font-size: 20px;
      }

      .v-enter,
      .v-leave-to{
          opacity: 0;
          transform: translateX(150px)
      }

      .v-enter-active,
      .v-leave-active{
          transition: all 0.5s ease;
      }
  </style>
</head>

<body>
  <div id="app">
      <router-link to="/login" tag="span">登录</router-link>
      <router-link to="/register" tag="span">注册</router-link>

      <!--展示路由组件的元素-->
      <transition mode="out-in">
          <router-view></router-view>
      </transition>
  </div>

  <template id="login">
      <div>
          <br/>
          用户名：<input type="text" name="username" id="username"><br/>
          密码：<input type="text" name="password" id="password"><br />
          <input type="button" value="登录">
      </div>
  </template>

  <template id="register">
      <div>
          <br />
          用户名：<input type="text" name="username" id="username"><br />
          密码：<input type="text" name="password" id="password"><br />
          确认密码：<input type="text" name="password" id="password"><br />
          <input type="button" value="注册">
      </div>
  </template>

  <script>
      //定义VueRouter变量
      var routerObj = new VueRouter({
          routes: [
              {
                  path: '/login',
                  component: {
                      template: '#login'
                  } //通过component指定路由跳转到的组件
              }, {
                  path: '/register',
                  component: {
                      template: '#register'
                  }
              }
          ]
      })

      var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router: routerObj
      })
  </script>
</body>
</html>