是的，在偷了两天懒之后，小编今天决定写出高质量的文章，不信你看╭(╯^╰)╮

image.png

一、router-link补充

  前面小编粗略的介绍了一下它的功能，但是呢小编现在对它有了进一步的认识。现在再次有请 router-link~

  router-link：我是一个精致的女孩子，出门之前必须要 “tag” 化妆师帮我设计今天的妆容，然后还会随身携带 “to”地图，避免自己到处迷路；当然了，我也是个奢侈的女孩子，用过的东西都会交给 “replace”帮我处理掉；最后我还是个有计划的女孩子，会提前把我的行程安排在“activeClass”计划表里。我是一个精致奢侈又有规划的女子，你呢 ?(✿◡‿◡)

通过上面的故事，小编提炼出四个关键字：tag、to、replace、activeClass。
① tag：指定 router-link 被渲染成什么组件。
  router-link 默认被渲染成 a标签，如果你想要渲染成别的标签，添加 tag 属性即可，具体用法如下：

<router-link to="/home" tag="button">首页</router-link>
<router-link to="/about" tag="button">关于</router-link>

image.png

<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>

  当用户点击 “首页” 就会跳转到 “/home” 路径下的文件，以此类推。这个功能是不是跟高德地图很像，想去哪里就去哪里，还不担心迷路(=@__@=)

image.png

③ replace：不会留下历史记录，即点击后退键不会返回到上一个页面中。
  router-link 默认是采用 pushState 的方式保留历史记录，如果在某些特殊的情况下不允许用户点来点去就乐意添加该属性。用法如下：

<router-link to="/home" replace>首页</router-link>
<router-link to="/about" replace>关于</router-link>

<router-link to="/home" tag="button" replace active-class="warp">首页</router-link>
<router-link to="/about" tag="button" replace active-class="warp">关于</router-link>

active-class.gif

const router = new VueRouter({
// 负责URL和页面的映射关系
    routes:[
    linkActiveClass:"warp"
})

active-class.gif

二、代码跳转路由

  在上面呢，我们是通过 router-link 标签来实现路由跳转的，那如果我不想通过这种方式来跳转路由，是否还有其他的方式呢？答案是：有的。下面小编就为大家分享路由跳转的进阶版本--代码跳转

1.基本思路

  代码跳转的思路很简单，通过添加事件，然后在对事件处理的methods方法中添加属性：this.$router 即可，具体见下面代码：

2.使用流程

① 绑定事件
  绑定事件的对象是需要路由跳转的地方，比如点击 “首页” 就跳转到 “/home”页面

<button @click="homeClick">首页</button>
<button @click="aboutClick">关于</button>

② 添加 this.$router属性
在导出路由对象的地方添加属性如下：

<script>
export default {
  name: 'App',
  methods:{
      homeClick(){
          this.$router.push('./home');
      },
      aboutClick(){
          this.$router.push('./about');
      }
  }
}
</script>

  $router是vue-router本身自带的属性。代码跳转的方式和使用 router-link 跳转的方式其实差不多，都可以一一对应起来。

image.png

看在小编比前两天积极的份上，就赏个赞呗 ❤