前言

当你在构建现代 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: https://www.thepolyglotdeveloper.com/2017/11/router-navigate-pages-vuejs-application/

译者：Alex1996a segmentfault：https://segmentfault.com/u/jianrui