前端应用_Vue_两种方法设置 router-link 样式.

当我们点击展示相应组建，标签会加个class 属性，如图，如果想高亮就需要重写这个样式<style>.router-link-active{background-color: green;font-size: larger;color: aliceblue}</style>我们也可以自定义一下，在 rou...

上海_彭彭

11253人浏览 · 2019-08-17 14:06:42

上海_彭彭 · 2019-08-17 14:06:42 发布

当我们点击展示相应组建，标签会加个class 属性，如图，

如果想高亮就需要重写这个样式
在这里插入图片描述

 <style>
  .router-link-active{
    background-color: green;
    font-size: larger;
    color: aliceblue

  }
  </style>

我们也可以自定义一下，在 router实例对象添加

 myactive: 'router-link-active',

也可以实现

全部代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script src='../../lib/vue-2.4.0.js'></script>
  <script src='../../vue-router-3.0.1.js'></script>
  <style>
  .router-link-active{
    background-color: green;
    font-size: larger;
    color: aliceblue

  }
  </style>
</head>
<body>
  <div id="pp">
    <!-- 创建两个button， 并通过href 找到相应组建的路由 -->
    <router-link to='/login' tag="span">登录</router-link>
    <router-link to='/registe' tag="span">注册</router-link>
   
    
    <!-- 用于显示路由组建 -->
    <router-view></router-view>

    
  </div>
  
  <script>
    // 创建两个组建模板对象，让路由能找到并显示这个组件
    
     var tmp1={
      template:'<h1>登录</h1>',
    }
    var tmp2={
      template:'<h1>注册</h1>',
    }
    // 创建路由对象，并设置路由的参数 ，第一个是path， 第二个是 要匹配的组建
    var routerObj=new VueRouter({
      routes:[
        {path:'/',redirect:'/login'},

        {path:'/login',component:tmp1},
        {path:'/registe',component:tmp2}
      ],
      myactive: 'router-link-active',
    })
    new Vue({
      el:'#pp',
      data:{

      },
      methods:{
      },
      // 让路由对象 和vue 实例 绑定关系， 用于监听。 
      router:  routerObj,
    })
  </script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐