链式路由跳转

本节讲解链式路由跳转，链式路由跳转其实就是在方法中进行跳转，我们先看普通路由跳转，代码如下。

<router-link to="/mytab">选项卡</router-link>

再看链式路由跳转的形式，代码如下。

<template>
  <div class="hello">
    //1．单击按钮，绑定单击事件
    <mt-button type="primary" @click="mybtn">路由跳转</mt-button>
  </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  methods: {
    mybtn() {
      //2．链式路由跳转，name就是路由匹配规则中的name
      this.$router.push({ name: 'myTab' });
    }
  }
};
</script>

代码解析如下。

使用 this.$router.push 进行页面跳转，name 为路由匹配规则中的 name。

上述代码中的路由跳转还可以用以下方式跳转，代码如下。

methods: {
  mybtn() {
    //链式路由跳转，path为路由匹配规则中的path
    this.$router.push({ path: '/mytab' });
  }
}

代码解析如下。

使用匹配规则中的 path 进行页面跳转。

传递参数：大多数页面跳转需要进行参数传递，以下代码为参数传递方式。

methods: {
  mybtn() {
    this.$router.push({
      path: '/mytab',
      query: { id: 1 }
    });
  }
}

在 mytab 组件中取值，代码如下。

<h1>选项卡案例--{{$route.query.id}}</h1>