通过代码实现路由的跳转

Posted 2021-07-27 So istes immer

目录 

修改App.vue 

<template>
  <div id="app">
    <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')
    },
    aboutClick(){
      this.$router.push('/about')
    }
  }
}
</script>

<style>
 .active{
  color: #f00;
 }
</style>

 $router这个属性是vue实例自带的

this. $router拿到的router和main.js里面的router是一个router