在App.vue里,定义三个按钮,指定各式的跳转规则
<template>
<div id="root">
<button class="button" @click="goback">后退</button>
<button class="button" @click="forwards">前进</button>
<button class="button" @click="goto">指定</button>
<router-link to="home">首页 \</router-link>
<router-link to="about">关于</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
components:{
},
data(){
return{
}
},
methods:{
goback(){
this.$router.go(-1)
},
forwards(){
this.$router.go(1)
},
goto(){
this.$router.push("/about")
},
}
}
</script>
<style lang="less">
.button{
position: relative;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #Fff;
background-color: red;
border-radius: 10px;
width: 100px;
height: 40px;
line-height: 40px;
font-size: 20px;
}
</style>