Vue编程式路由导航

编程式路由导航

作用：不借助<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>