网站首页 » 前端开发 » Vue » Vue2 编程式导航
上一篇:
下一篇:

Vue2 编程式导航

前言

编程式导航,其实就是把浏览器的一些前进,后退按钮放到页面中实现而已,不过利用它,我们就可以很方便地对路由的前进后退进行跳转了。这个功能对于用户来说还是挺实用的,因为很多时候用户都会去点浏览器里的前进后退按钮,就看你想不想把它放到页面中了,假设我们要这么做,那么我们就来看看要怎么才能实现这个效果。

这个示例我们用了 Bootstrap 框架的一些样式,所以如果你是拷贝这个示例代码并想看到同样的效果的,你就必需引入这个库。

编程式导航之旅

之前我们有用过<router-link></router-link>来实现路由之间的跳转,其实它的原理跟编程式导航是差不多的。只是编程式导航更灵活,便说到方便的话,肯定是<rotuer-link></router-link>更方便了,因为它可以直接用,而不用写多余的代码。而编程式导航就需要们写对应的方法。

分析:

$router 实例为我们提供了几个方法:

  • back() 后退一步
  • forward() 前进一步
  • go() 后退(参数为负数)和前进(参数为传正数)指定步数
  • push()  跳到指定的 url ,向 history 栈添加一个记录
  • replace()  跳到指定的 url,替换 history 栈中当前记录

效果演示:

Vue 编程式导航

下面是一个示例代码:

关键代码文件(App.vue)
<template>
  <div id="app">
      <div class="container">
          <nav class="navbar navbar-default">
              <div class="navbar-header">
                <a class="navbar-brand" href="#">云库网</a>
              </div>
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <router-link to="/" tag="li" exact><a>首页</a></router-link>
                    <router-link :to="m.url" tag="li" v-for="m in menus" :key="m.id"><a>{{m.name}}</a></router-link>
                </ul>
              </div>
          </nav>
          <button class="btn btn-primary" @click="backHandler">后退</button>
          <button class="btn btn-primary" @click="forwardHandler">前进</button>
          <button class="btn btn-primary" @click="goHandler">跳步</button>
          <button class="btn btn-primary" @click="pushHandler">push</button>
          <button class="btn btn-primary" @click="replaceHandler">replace</button>
          <transition :name="run" mode="out-in"> 
            <router-view class="text-center"></router-view>
          </transition>
      </div>
  </div>
</template>
<script>
const menus = [
  { id: 1, name: "Angular", url: "/angular" },
  { id: 2, name: "html5", url: "/html5" },
  { id: 3, name: "关于", url: "/about" }
];
export default {
  name: "App",
  data() {
    return {
      menus,
      run: "left"
    };
  },
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.run = "right";
      } else {
        this.run = "left";
      }
    }
  },
  methods: {
    backHandler() {
      this.$router.back();
    },
    forwardHandler() {
      this.$router.forward();
    },
    goHandler() {
      this.$router.go(-1);
      // this.$router.go(-2);
      // this.$router.go(1);
      // this.$router.go(2);
    },
    pushHandler() {
      // 字符串用法
      this.$router.push("/html5");
      // 对象用法(用这种方法写的话就更加灵活,你可以传更多的参数)
      // this.$router.push({ path: "/html5" });
      // this.$router.push({ path: "/html5", query: { info: "new" } });
    },
    replaceHandler() {
      // 字符串用法
      this.$router.replace("/html5");
      // 对象用法(用这种方法写的话就更加灵活,你可以传更多的参数)
      // this.$router.replace({ path: "/html5" });
      // this.$router.replace({ path: "/html5", query: { info: "new" } });
    }
  }
};
</script>
<style>
.left-enter {
  transform: translateX(100%);
}
.left-enter-to {
  transform: translateX(0);
}
.left-enter-active {
  transition: 0.2s;
}
.left-leave {
  transform: translateX(0);
}
.left-leave-to {
  transform: translateX(-100%);
}
.left-leave-active {
  transition: 0.2s;
}
.right-enter {
  transform: translateX(-100%);
}
.right-enter-to {
  transform: translateX(0);
}
.right-enter-active {
  transition: 0.2s;
}
.right-leave {
  transform: translateX(0);
}
.right-leave-to {
  transform: translateX(100%);
}
.right-leave-active {
  transition: 0.2s;
}
.container {
  overflow: hidden;
}
</style>

其它文件就不贴出来了,因为本文章所要分享的编程式导航的代码都在这个文件里了,其它的文件我假设你都会写了(包括路由、组件)。

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/vue-navigation/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END