使用 vue-router 进行页面导航

本文演示如何在Vue项目中加入路由支持，并构建一个两个界面路由的案例。

首先，使用 vue-cli 的 create 命令建立一个空的项目: router-basic, 在建立中，全部使用默认设置即可。

1	vue create router-basic

加入 vue-router 的支持

vue 的路由功能由 vue-router 来实现，所以我们首先需要在项目中加入 vue-router。在项目根目录中，执行一下命令:

1	yarn add vue-router

执行完成后，可以在项目的package.json 文件中看到新增的依赖:

"dependencies": {
  "core-js": "^2.6.5",
  "vue": "^2.6.10",
  "vue-router": "^3.1.3"
}

引入 Router 对象

在项目的 src 目录中新建一个名为 router.js 的文件。在文件中加入一下内容：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
  ]
})

在代码的第2行，引入了 vue-router 中的 Router 对象，在第4行，安装Router插件，以便后续可以使用，从第6行开始，生成一个Router对象的实例并Export到外部。后续要加入的导航设置将作为json 对象加入到 routes 数组中。

然后，在 main.js 文件中，引入初始后的 router 对象。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

其中第3行，第8行是新加入的。

最后，修改 App.vue 文件，删除模版中原来的内容，并加入 router-view，修改过后的 App.vue如下:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>
</style>

加入新的页面

在项目的 src 目录下，建立一个新的目录，名为: pages, 用以存放所有单独的界面文件。然后在 pages中建立两个界面文件: Splash.vue 和 Home.vue。

代码如下:

Splash.vue

<template>
    <h1>Splash</h1>
</template>

<script>
export default {
    name: 'splash'
}
</script>

<style>

</style>

Home.vue

<template>
    <div>
        <h1>Home page</h1>
    </div>
</template>

<script>
export default {
    name: 'home'
    
}
</script>

<style>

</style>

现在启动程序，可以看到，显示 Splash 界面的内容，因为在router规则中，为 splash 配置的路径为空，代表其为默认路径。

从 Splash 导航到 Home

实际上，vue-router 支持两种方式进行页面间的导航:

编程式: 在javascript程序中，使用 router.push 方法进行导航
声明式: 在 html 中，使用标签进行导航

首先，介绍编程式

在 splash 界面中加入一个按钮，在按钮的事件中执行导航到 home 的动作, 代码如下:

<template>
    <div>
        <h1>Splash</h1>
        <button v-on:click="goHome">Go to Home</button>
    </div>
</template>

<script>
export default {
    name: 'splash',
    methods: {
        goHome: function() {
            this.$router.push('/home')
        }
    }
}
</script>

<style>

</style>

再运行程序，按下 “Go to Home” 按钮，可以看到页面跳转为 Home。

现在使用声明式来完成同样的功能

也可以使用 router-link 指令，在页面上直接建立到 home 界面的链接。如下:

<div>
    <h1>Splash</h1>
    <button v-on:click="goHome">Go to Home</button>
    <div>
        <router-link to="/home">Link to Home</router-link>
    </div>
</div>