编程式路由

编程式路由

除了使用 <router-link> 来创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

router.push(location, onComplete?, onAbort?)

注意，在 vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈中添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link ：to="..."> 等同于调用 router.push(...)。

声明式	编程式	Vue实例中
<router-link :to="...">	router.push(...)	this.$router.push(...)

该方法的参数可以是一个字符串地址，或者一个描述地址的对象。比如：

<script>
export default {
  name: 'App',
  methods: {
    goHome() {
      // 字符串
      this.$router.push('/');
      // 或者-使用对象 this.$router.push({path: '/'})
      // 或者-命名的路由 this.$router.push({name: '/', params: { userId: '123' }})
      // 或者-带查参数，编程 ?plan=private this.$router.push({path: '/', query: { plan: 'private' }})
    }
  },
}
</script>

如果提供了 path ，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面的做法，你需要提供路由的 name 或手写完整的带有参数的 path。

<script>
export default {
  name: 'App',
  methods: {
    goHome() {
      // /user/123
      this.$router.push({ name: '/', params: {userId} });
      // /user/123
      this.$router.push({ path: `/user/${userId}`});
    }
  }
}
</script>

name 用来从路由配置文件中选择与属性值相同的路由。即需要在路由配置文件配置相同的 name 属性的路由。

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者向后回退多少步，类似 window.history.go(n)

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      <button @click="goBack()" >后退</button>
      <button @click="goAhead()">前进</button>
      <p>
        <button @click="goHome()">返回首页</button>
      </p>
    </div>
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goAhead() {
      this.$router.go(1);
    },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.right {
  float: left;
  width: 50%;
  height: 300px;
  background-color: #ccc;
}

.left {
  float: left;
  width: 50%;
  height: 300px;
  background-color: #c0c;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity .7s;
}

.fade-enter-to {

}

.fade-leave {
  opacity: 1;
}

.fade-leave-active {
  opacity: 0;
  transition: opacity 1s;
}
</style>

router.replace(loaction, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

声明式	编程式	Vue实例中
<router-link :to="..." replace="...">	router.replace(...)	this.$router.replace(...)