使用 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 文件中看到新增的依赖:

1
2
3
4
5
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.1.3"
}

引入 Router 对象

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

1
2
3
4
5
6
7
8
9
10
11
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 对象。

1
2
3
4
5
6
7
8
9
10
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如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<h1>Splash</h1>
</template>

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

<style>

</style>

Home.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div>
<h1>Home page</h1>
</div>
</template>

<script>
export default {
name: 'home'

}
</script>

<style>

</style>

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

从 Splash 导航到 Home

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

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

首先,介绍编程式

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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 界面的链接。如下:

1
2
3
4
5
6
7
<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>

本文标题:使用 vue-router 进行页面导航

文章作者:梅老师

发布时间:2019年09月20日 - 20:09

最后更新:2020年09月16日 - 08:09

原始链接:https://www.mls-tech.info/web/vue/vue-use-router/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。