Vue-router-link（八）

1、router-link：是已经自动注册的全局组件,默认渲染成a标签，如果加个tag="button",就渲染成按钮
App.vue

<template>
  <div id="app">
    <div id="nav">
    <!--<button>按钮</button>-->
    <!-- router-link是已经自动注册的全局组件,默认渲染成a标签，如果加个tag="button",就渲染成按钮-->
    <!-- 还可以加一个replace，就相当于history.replaceState模式，禁止浏览器前后操作-->
      <router-link to="/home" tag="button" >Home</router-link> |
      <router-link to="/about" tag="button" >About</router-link>
    </div>
    <!-- router-view起到占位的作用，当router-link选然后，对应的vue会替代router-view-->
    <!-- 动态渲染出不同的组件-->
    <router-view/>
  </div>
</template>

渲染成按钮

2、router-link还有个作用就是类似生成动态class，当点击哪个按钮的时候，该按钮上就会多一个class属性：

class属性

3、有了class属性，我们就可以增加一个点击按钮变色的功能，就不需要再添加method去实现：
App.vue

<template>
  <div id="app">
    <div id="nav">
    <!--<button>按钮</button>-->
    <!-- router-link是已经自动注册的全局组件,默认渲染成a标签，如果加个tag="button",就渲染成按钮-->
    <!-- 还可以加一个replace，就相当于history.replaceState模式，禁止浏览器前后操作-->
      <router-link to="/home" tag="button" >Home</router-link> |
      <router-link to="/about" tag="button" >About</router-link>
    </div>
    <!-- router-view起到占位的作用，当router-link选然后，对应的vue会替代router-view-->
    <!-- 动态渲染出不同的组件-->
    <router-view/>
  </div>
</template>

<style lang="scss">
.router-link-active  {
  color: red;
}
</style>

image.png

4、通过代码修改路由：

<template>
  <div id="app">
    <div id="nav">
    <!--<button>按钮</button>-->
    <!-- router-link是已经自动注册的全局组件,默认渲染成a标签，如果加个tag="button",就渲染成按钮-->
    <!-- 还可以加一个replace，就相当于history.replaceState模式，禁止浏览器前后操作-->
    <!-- 也可以更改class属性，加个  active-class='xxx'，记得样式的class也要改-->
<!--      <router-link to="/home" tag="button" >Home</router-link>-->
<!--      <router-link to="/about" tag="button" >About</router-link>-->

<!--      通过代码的方式修改路由-->
      <button @click="homeClick">home</button>
    </div>
    <!-- router-view起到占位的作用，当router-link选然后，对应的vue会替代router-view-->
    <!-- 动态渲染出不同的组件-->
    <router-view/>
  </div>
</template>

<style lang="scss">
.router-link-active  {
  color: red;
}
</style>

<script>
  export default {
    name:'App',
    methods:{
      homeClick(){
        // 代码的方式修改路由 vue-router
        this.$router.push('/home')
      }
    }
  }
</script>