Vuejs学习笔记(三)-15.vue-router的基本使用-不使用router-link标签,通过代码进行路由跳转
1.可以通过代码的方式结合router-view来实现跳转
1 <template> 2 <div> 3 <!-- <router-link to="/home" tag="button" replace="" active-class="active">首页</router-link>--> 4 <!-- <router-link to="/about" replace="">关于</router-link>--> 5 <!-- <router-view></router-view>--> 6 <button @click="homeClick" >关于</button> 7 <button @click="aboutClick" >首页</button> 8 <router-view></router-view> 9 </div> 10 </template> 11 12 <script> 13 14 15 export default { 16 name: 'App', 17 methods:{ 18 homeClick(){ 19 // 这个跳转有历史记录 20 // this.$router.push('/home') 21 // replace跳转没有历史记录 22 this.$router.replace('/home') 23 }, 24 aboutClick(){ 25 // this.$router.push('/about') 26 this.$router.replace('/about') 27 } 28 } 29 } 30 </script> 31 32 <style> 33 .router-link-active { 34 color:red; 35 } 36 .active{ 37 color:green; 38 } 39 .active1{ 40 color:yellow; 41 } 42 43 </style>
但是下方有报错
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14985543.html