Vuejs学习笔记(三)-15.vue-router的基本使用-不使用router-link标签，通过代码进行路由跳转

1.可以通过代码的方式结合router-view来实现跳转

<template>
  <div>
<!--    <router-link to="/home" tag="button" replace="" active-class="active">首页</router-link>-->
<!--    <router-link to="/about" replace="">关于</router-link>-->
<!--    <router-view></router-view>-->
    <button @click="homeClick" >关于</button>
    <button @click="aboutClick" >首页</button>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
  methods:{
    homeClick(){
      // 这个跳转有历史记录
      // this.$router.push('/home')
      // replace跳转没有历史记录
      this.$router.replace('/home')
    },
    aboutClick(){
      // this.$router.push('/about')
      this.$router.replace('/about')
    }
  }
}
</script>

<style>
.router-link-active {
  color:red;
}
.active{
  color:green;
}
.active1{
  color:yellow;
}

</style>

但是下方有报错