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>

但是下方有报错

 

 

posted @ 2021-07-08 12:18  kaer_invoker  阅读(269)  评论(0)    收藏  举报