router-link属性
to:跳转路径
tag:渲染成一个组件,如<router-link to="About" tag="button">关于 </router-link>
会渲染成一个标签。
replace:阻止网页有返回效果,不会留下history记录
active-class: 当对应的路由匹配不成功时,会自动给当前元素设置一个router-link-active 通常不会修改这个属性。
通过代码跳转路由
App.vue代码如下:
<button @click="homeClick">首页</button>
<button @click="aboutClick">关于</button>
相应的修改触发事件
通过this调用$router这个类,再调用其方法push/replace
methods:{
homeClick(){
// this.$router.push('/home')
this.$router.replace('/home')
console.log('home')
},
aboutClick(){
// this.$router.push('/about')
this.$router.replace('/about')
}
}