前言
当你在构建现代 web 应用程序时，无可避免地需要在页面之间跳转。轻易地做到这一点是非常重要的。为了实现这一点，Angular、React 和 Vue 等框架都具有路由功能。
接下来，我们将会学到如何使用 vue-router 配置路由，并实现在不同路由之间的跳转。
如果你一直在关注我的内容，你会记得我写过一些关于在 Angular 如何实现路由功能的文章，题目是使用Angular 路由器实现页面间跳转。虽然是一个完全不同的框架，但是其中的一些概念可以应用到 Vue 中。
用 Vue CLI (命令行工具）新建一个 Vue 项目、
简单起见，我们将创建一个新的 Vue 项目，并将其应用到这个示例中。对于例子，我们将使用 Vue CLI 工具来构建我们的项目，请确保你已经安装相关工具
vue init webpack router-project
在项目初始化期间，使用 standalone (独立构建：运行时和编译器) 还是只使用 runtime-only （运行时模式）并不重要。确保 vue-router 已经安装好，因为我们将在以后使用它。linter 和 test 包是可选的，因为我们不会在本例中使用它们
当项目初始化完成后，执行以下命令:
cd router-project
npm install
这时候，我们就可以开始写代码了
编写页面和配置路由
Vue CLI 已经为我们创建了 在src/components 目录下创建了HelloWorld.vue 文件，进入到此目录，并把HelloWorld.vue 改为page1.vue
打开项目 src/components/page1.vue, 编写如下代码：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Page1',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
您会注意到上面的代码只是我们从搭建项目中得到的简化版本。在<script>标记中，我们确实将组件重命名为Page1。当我们配置路由时，这个名字很重要.
将src/components/page1.vue 一份，并改名为page2.vue。为了简单起见，我们的路由页面都会长得差不多
在src/components/page2.vue 上的代码，应该长这样:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Page2',
data () {
return {
msg: 'Hey Nic Raboy'
}
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
在上面的代码中，我们已经更改了组件名和msg的内容。但没有比初始化的代码复杂很多
接下来，我们就可以开始配置路由了：
打开src/router/index.js， 敲入下面的代码
import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Page2 from '@/components/page2'
Vue.use(Router)
export default new Router({
routes: [
{
path: "/",
redirect: {
name: "Page1"
}
},
{
path: '/page1',
name: 'Page1',
component: Page1
},
{
path: '/page2',
name: 'Page2',
component: Page2
}
]
})
上面的代码，做了哪些事情呢？
首先，我们引入了Page1和Page2 组件。每个组件都会成为我们应用的一个路由，所以你需要把他们写到到
routes 数组中
通常，我们不会将Page设置为默认路由，而是在程序加载的时候重定向到它。routers 中的每一项都有一个path（路径)以及和name（名称）相匹配的component（组件）。path 就是浏览器 URL 栏上显示的内容，将来我们可以根据 path 或者 name 跳转
使用 Vue CLI 和 脚手架，会在src/main.js将 router 绑定到我们根容器中。现在我们可以考虑使用它
通过 HTML 标签和 通过 Javascript 代码在页面跳转
我们有两个组件和两个可能的路径，因此可以在它们之间跳转页面。你可以通过HTML标签或 JavaScript代码 实现。
打开src/components/page1.vue 文件，在<template> 块中, 编写:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-link to="/page2">Navigate to Page2</router-link>
</div>
</template>
值得学习的是，在上面代码中有一个<router-link>标签。当元素被点击时，Vue 将页面导航到指定的路由路径中
如果你想根据name来导航，你可以将代码改为:
<router-link :to="{ name: 'Page2' }">Navigate to Page2</router-link>
以上就是通过 HTML 标签导航的例子，下面我们来用 JavaScript 的代码实现同样功能
打开src/components/page2.vue 文件，<script>中的代码改为
<script>
import router from '../router'
export default {
name: 'Page2',
data () {
return {
msg: 'Hey Nic Raboy'
}
},
methods: {
navigate() {
router.push({ name: "Page1" });
}
}
}
</script>
注意到的是，在上面代码中我们引入 route 的配置文件。在此基础上我们可以创建一个名为navigate的方法，该方法将一个路由压栈，使得我们可以跳转到Page1页面
我们需要在某个地方来调用navigate方法。回到<template>的代码处，你可以编写成这样：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<a style="cursor: pointer; text-decoration: underline" v-on:click="navigate()">Navigate to Page1</a>
</div>
</template>
在这里，我们使用v-on:click 事件去调用 navigate 方法
如果你需要实现返回上一页的功能，你可以这样写:
methods: {
navigate() {
router.go(-1);
}
}
你甚至将参数-1改为其他，实现返回倒数第二页等功能
总结
本节你学会了如何在 Vue 应用程序中使用 vue-router 库在路由之间跳转。跳转可以通过HTML标志 JavaScript 代码实现，并且可以很容易地。在接下来的教程中，我们将探讨如何在使用路由页面跳转之间传递数据。这在master-detail场景时非常有用。
via: www.thepolyglotdeveloper.com/2017/11/rou…
译者：Alex1996a segmentfault：segmentfault.com/u/jianrui
