vue-router 有两种实现页面跳转的方法。
1 <router-link> 组件
<template>
<div>
<h3>首页</h3>
<router-link to="/about">关于我们</router-link>
</div>
</template>
效果：
渲染后的代码：
可以看出， <router-link> 组件会被渲染成 <a> 标签。
<router-link> 组件有以下这些属性：
| 属性 | 说明 |
|---|---|
| to | 需要跳转的路径。当然，我们也可以使用 v-bind 来实现类似功能。 |
| tag | 指定渲染成什么标签，默认渲染为 <a> 标签。 |
| replace | 使用替换模式，所以不会留下 History 记录。 |
| active-class | 当 <router-link> 与当前所对应的路由一致时，就会自动给当前元素设置一个名为 router-link-active 的 class。设置这一属性，可以修改默认的 class 名称（ router-link-active ）。设计导航栏时，可以利用该属性，实现高亮显示当前页面对应的导航菜单项 。 |
2 router 实例
有些场景，如果在 JavaScript 中实现页面跳转，这时就可以使用 router 实例来实现：
<template>
<div>
<h3>简介</h3>
<button @click="clickByRouter">点击跳转</button>
</div>
</template>
<script>
export default {
name: "about",
methods:{
clickByRouter(){
this.$router.push('/article/321')
}
}
}
</script>
效果：
$router 还定义了以下方法：
| 方法 | 说明 |
|---|---|
| replace | 类似 <router-link> 组件的 replace 属性功能。 |
| go | 类似 window.history.go()，即可以在浏览器的历史记录中向前（正数）或向后（负数）多少步。 |
