前端技术分享
0%

【037】vue-cli4.0基础学习：编程式的导航

发表于 分类于

前言

在上一章中，我们是依靠<router-link>进行跳转的，其实这个就是创建 a 标签来定义导航链接的。但是在我们实际的开发过程中，往往需要在跳转前处理一些逻辑或验证之类的事情，比如提交一个表单的数据，当点提交时，往往需要先做一个验证，确认数据无误后再进行提交，提交成功后跳转进入提交成功提醒页面。这个时候，我们就可以借助 router 的实例方法，通过编写代码来实现。

router 的实例方法

代码模版：

1
2
3
4
5
6
7
8
9
10
11
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

我们在components文件夹下新建一个名字为v-success.vue的文件，在提交信息成功后出现。

v-success.vue的完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
<template>
    <div class="v-success">
        <h1>提交成功</h1>
    </div>
</template>

<script>
export default {
    name: 'v-success',
    desc: '提交成功'
}
</script>

既然加了新的跳转组件，那么我们肯定也需要修改一下路由配置文件。
打开 router -> index.js 文件，完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 引入 Vue
import Vue from 'vue';
// 引入 vue-router
import VueRouter from 'vue-router';
// 安装使用 vue-router
Vue.use(VueRouter);
// 引入首页
import vIndex from '../components/v-index.vue';
// 开始使用 vue-router
let routes = new VueRouter({
    routes: [
        { path: '/', component: vIndex },
        { path: '/about', component: () => import(/* webpackChunkName: "about" */ '../components/v-about.vue') },
        { path: '/success', component: () => import(/* webpackChunkName: "success" */ '../components/v-success.vue') },
      ]
});
// 提供接口给外面使用
export default routes;

最后我们在v-about.vue文件中添加一个能填写信息的表单，完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<template>
    <div class="v-about">
        <h1>我是关于</h1>
        <div class="msg">
            <h4>信息填写</h4>
            <form style="margin-top: 10px;">
                <label>
                    <span>姓名：</span>
                    <input v-model="myName" />
                </label>
                <button style="margin-left: 20px; padding: 2px 10px;" @click.prevent="submit">提交</button>
            </form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'v-about',
    desc: '关于',
    data() {
        return {
            myName: ''
        }
    },
    methods: {
        submit() {
            let myName = this.myName;
            if (myName) {
                this.$router.push('/success');
            } else {
                alert('姓名不能为空！')
            }
        }
    }
}
</script>

<style scoped>
.v-about {
    padding: 20px 30px;
}
.msg {
    width: 300px;
    padding: 20px;
    border: 1px solid #eee;
    margin-top: 20px;
}
</style>

修改完后，我们在浏览器中看看效果，如果我不填写姓名就点击提交，页面出现姓名不能为空！的提示，填写完姓名后，成功跳转进入成功提示页面。

目前项目目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.
|-- node_modules
|-- public
|   |-- favicon.
|   |-- index.html
|-- src
|   |-- assets
|   |-- components
|   |   |-- HelloWorld.vue
|   |   |-- v-about.vue
|   |   |-- v-header.vue
|   |   |-- v-index.vue
|   |   |-- v-success.vue
|   |-- router
|   |   |-- index.js
|   |-- App.vue
|   |-- main.js
|-- .gitignore
|-- babel.config.js
|-- package-lock.json
|-- package.json
|-- README.md
.

总结

以上只是一个简单的例子，代码在书写规范上随意了一些，所以请大家自动忽略我这样的随意，我们主要是看一下这个东西是怎么用的。