PHPer快速上手VUE——边学边练5–利用路由进行页面跳转

admin | 2020年6月23日 | 志怪故事 | 评论已关闭 | 1528

看了不少有关vue路由的文档，基本上都是在单页面操作。很少有系统性的路由例子。所以上一篇我把路由的生产状态的如何使用的代码贴了出来。vue路由的功能很多，我只是把常用的功能写了出来。

这一篇，我们先回想一下，我之前文章里，说要做一个头部和尾部的公用组件，我直接把头部的代码贴出来，因为它也涉及到了路由的跳转。

我们都知道，大部分手机端页面，最上部分，有个 < 回退，点击后回退到上一页，头部组件里，就有这部分代码，大家仔细看一下，代码很简单。

<template>
    <header class="ui-header ui-header-positive ui-border-b">
        <div class="ui-row-flex ui-whitespace">
            <div class="ui-col ui-col-1 left-item"><img src="../assets/images/back@1x.png" v-on:click="goBack"></div>
            <div class="ui-col ui-col-3"><h1>{{ $route.meta.title }} </h1></div>
            <div class="ui-col ui-col-1"></div>
        </div>
    </header>
</template>
<script>
    export default {
        name: 'Header',
        data: function () {
            return {}
        },
        methods: {
            goBack() {
                if (window.history.length > 1) {
                    this.$router.back();
                } else {
                    this.$router.push('home');
                }
            },
        }
    }
</script>
<style scoped>
    .ui-row-flex .left-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        vertical-align: middle;
    }
    .ui-row-flex .right-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-right: 15px;
    }
    .ui-row-flex h1 {
        align-items: center;
        vertical-align: middle;
        text-align: center;
        margin-top: 3px;
        margin-left: 15px;
    }
</style>

<div class="ui-col ui-col-3"><h1>{{ $route.meta.title }} </h1></div>

</div>

</header>

</template>

export default {

name: 'Header',

data: function () {

return {}

methods: {

goBack() {

if (window.history.length > 1) {

this.$router.back();

} else {

this.$router.push('home');

}

</script>

.ui-row-flex .left-item {

display: flex;

flex-direction: row;

justify-content: flex-start;

align-items: center;

vertical-align: middle;

}

.ui-row-flex .right-item {

display: flex;

flex-direction: row;

justify-content: flex-end;

align-items: center;

margin-right: 15px;

}

.ui-row-flex h1 {

align-items: center;

vertical-align: middle;

text-align: center;

margin-top: 3px;

margin-left: 15px;

}

</style>

$route.meta.title ，就是每个页面路由中定义的title标题
this.$router.back() 返回上一页，还有个 this.$router.go(-1)也是有类似的效果
this.$router.push(‘home’) 将路由定义到路由表name = home的页面

同样，首页的九宫格代码里也包含了跳转：

<template>
    <div>
        <gk-tips type="warn" linkType="link" :btnLink="['button','http://www.baidu.com']">自定义组件测试</gk-tips>
        <div class="ui-feeds">
            <ul>
                <li v-for="n in numbers">
                    <span v-bind:style="backImg(n)" v-on:click="gotoPage(n)"></span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import Tips from "@/components/Tips.vue";
    export default {
        name: 'Home',
        data () {
        return {
            numbers: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ],
            path: ['/OrderList','/OrderDetail'],
            }
        },
        methods: {
            backImg: function (n) {
                return 'background-image:url("'+require('@/assets/images/jiu0' + n + '.png')+'")'
            },
            gotoPage(n) {
                let i = n - 1;
                this.$router.push(this.path[i]);
            },
        },
        components: {
            'gk-tips' : Tips
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>