【Vue框架】vue-router实现Tab页的切换

1. router-link与a标签的关系

1. 当安装、配置了vue-router以后，就可以使用router-link来替代普通的a标签。
2. 关系，如下图一一对应：
   
   结果：
   

2. 代码

代码结构：

2.1 router/index.js 代码

import Vue from "vue";
import VueRouter from "vue-router";

import Home from "@/components/Tab/Home";
import Movie from "@/components/Tab/Movie.vue";
import About from "@/components/Tab/About/About.vue";
import Tab1 from "@/components/Tab/About/Tab1";
import Tab2 from "@/components/Tab/About/Tab2";

// 将 VueRouter 安装为 Vue 项目的插件
// Vue.use() 函数作用：用于安装插件
Vue.use(VueRouter);

// routes是一个数组，作用：定义“hash地址“与”组件“之间的对应关系
const routes = [
  // 重定向的路由规则
  { path: "/", redirect: "/home" },
  // 路由规则
  {
    path: "/home",
    component: Home,
  },
  {
    path: "/movie",
    component: Movie,
  },
  {
    path: "/about",
    component: About,
    // 重定向
    redirect: '/about/tab1',
    children: [
      // 子路由规则
      { path: "tab1", component: Tab1 },
      { path: "tab2", component: Tab2 },
    ],
  },
];

// 创建路由的实例对象
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

2.2 App.vue

<template>
  <div id="app">
    根组件
    <hr />

    <!-- 当安装、配置了vue-router以后，就可以使用router-link来替代普通的a标签了 -->
    <router-link to="/home">首页 </router-link>
    <router-link to="/movie">电影 </router-link>
    <router-link to="/about">关于</router-link>


    <!-- 只要在项目中安装和配置了 vue-router ，就可以使用router-view 这个组件了、 -->
    <!-- 它的作用： 占位符 -->
    <router-view />
  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      comName: "",
    };
  },
};
</script>

<style lang="less">
#app {
  width: 100%;
  height: 500px;
  background-color: skyblue;
}
</style>

2.3 Home.vue

<template>
  <div class="home-container">
    <h3>Home 组件</h3>
  </div>

  
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.home-container {
  background-color: pink;
  height: 200px;
}
</style>

2.4 Movie.vue

<template>
  <div class="movie-container">
    <h3>Movie 组件</h3>
  </div>

  
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.movie-container {
  background-color: orange;
  height: 200px;
}
</style>

2.5 About.vue

<template>
  <div class="about-container">
    <h3>About 组件</h3>


    <!-- 子路由连接 -->
    <router-link to="/about/tab1">Tab1</router-link>
    <router-link to="/about/tab2">Tab2</router-link>

    <hr>

    <!-- 子级路由的占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.about-container {
  background-color: greenyellow;
  height: 300px;
}
</style>

2.6 Tab1.vue

<template>
  <div class="tab1">
    <h3>Tab1 组件</h3>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.tab1 {
  background-color: burlywood;
  height: 150px;
}
</style>

2.7 Tab2.vue

<template>
  <div class="tab2">
    <h3>Tab2 组件</h3>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.tab2 {
  background-color:khaki;
  height: 150px;
}
</style>

3. 实现的功能

1. 点击“首页”、“电影”、“关于”，切换一级Tab页面。
2. 点击关于中的“Tab1”、“Tab2”，切换Tab1和Tab2。
   
   
   
   

---

参考： 黑马vue视频。