编程式路由导航
作用:不借助<router-link>
实现路由跳转,让路由跳转更加灵活
以下放在你配置路由的页面代码:
<template>
<div>
<h1>页面</h1>
<hr />
<button @click="btn1()">前进</button>
<button @click="btn2()">后退</button>
<button @click="btn3()">0刷新1前进-1后退</button>
<hr />
//这些是你自己配置的路由页面
<router-link to="/car/carone">车1</router-link> |
<router-link to="/car/cartwo">车2</router-link> |
<router-link to="/car/carthree">车3</router-link>
<router-view />
</div>
</template>
<script>
export default {
// name:car,
data() {
return {
};
},
methods: {
// 前进
btn1() {
this.$router.forward()
},
// 后退
btn2() {
this.$router.back()
},
// 0刷新1前进-1后退
btn3() {
this.$router.go(-1)
},
},
};
</script>