Vue知识点整理（六）- vue-router（1）- 路由简介、路由基本使用、嵌套路由

一、路由简介1.1 vue-router 的理解vue的一个插件库，专门用来实现SPA应用介绍 | Vue Router (vuejs.org)https://router.vuejs.org/zh/introduction.html1.2 对SPA应用的理解单页面Web应用（single page web application，SPA）整个应用只有一个完整的页面点击页面中的导航链接不会刷新页面

JHY97

620人浏览 · 2022-04-26 07:30:00

JHY97 · 2022-04-26 07:30:00 发布

2.4 实现切换（active-class可配置高亮样式）

2.5 指定位置

2.6 注意

2.7 案例练习

2.7.1 src/pages/Home.vue

2.7.2 src/pages/About.vue

2.7.3 src/router/index.js

2.7.4 main.js

2.7.5 src/components/Banner.vue

4.1 News.vue - 二级路由相关组件

4.2 Message.vue - 二级路由相关组件

4.3 src/router/index.js

4.4 Home.vue

一、路由简介

1.1 vue-router 的理解

vue的一个插件库，专门用来实现SPA应用

介绍 | Vue Router (vuejs.org)https://router.vuejs.org/zh/introduction.html

1.2 对SPA应用的理解

单页面Web应用（single page web application，SPA）
整个应用只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
数据需要通过ajax请求获取

1.3 路由的理解

1.3.1 什么是路由

一个路由就是一组映射关系（key - value）
key为路径，value可能是 function 或 component

1.3.2 路由的分类

1. 后端路由：

（1）理解：value是function，用于处理客户端提出的请求

（2）处理过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

2. 前端路由：

（1）理解：value是component，用于展示页面内容

（2）处理过程：浏览器路径改变时，对应的组件就会显示

二、路由基本使用

2.1 安装vue-router

2022年2月7日后，vue-router的默认版本为4版本，且vue-router4只能在vue3中使用，如果使用的是vue2，那只能安装vue-router3

安装vue-router3默认版本：

npm i vue-router

安装vue-router3：

npm i vue-router@3

2.2 引用vue-router

// 引入vueRouter
import VueRouter from "vue-router";

// 应用插件
Vue.use(VueRouter);

2.3 编写router配置项

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import 组件1 from "../pages/组件1.vue";
import 组件2 from "../pages/组件22.vue";

export default new VueRouter({
  routes: [
    {
      path: "/一级路径命名1",
      component: 组件1,
    },
    {
        path: "/一级路径命名2",
        component: 组件2,
      },
  ],
});

2.4 实现切换（active-class可配置高亮样式）

    <!-- Vue中借助router-link标签实现路由的切换 -->
    <router-link active-class="active" to="/路径命名1">导航栏命名</router-link>

2.5 指定位置

    <!-- 指定组件的呈现位置 -->
    <router-view></router-view>

2.6 注意

路由组件通常存放在pages文件夹，一般组件通常放在components文件夹
通过切换，"隐藏"了的组件，默认是被销毁掉的，需要的时候再去挂载
每个组件都有自己的$route属性，里面存储着自己的路由信息
整个应用只有一个router，可以通过组件的$router属性获取到

2.7 案例练习

使用vue-router库提供的标签实现路由切换

2.7.1 src/pages/Home.vue

简单创建Home组件用于展示案例效果

<template>
  <div>
    <h1>Home相关内容</h1>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style></style>

2.7.2 src/pages/About.vue

简单创建About组件用于展示案例效果

<template>
  <div>
    <h1>About相关内容</h1>
  </div>
</template>

<script>
export default {
  name: "About",
};
</script>

<style></style>

2.7.3 src/router/index.js

该文件专门用于创建整个应用的路由器，并为组件配置路径

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "../pages/About.vue";
import Home from "../pages/Home.vue";

export default new VueRouter({
  routes: [
    {
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
    },
  ],
});

2.7.4 main.js

引入vue-router和路由器

// 引入Vue
import Vue from "vue";
// 引入App
import App from "./App.vue";
// 引入vueRouter
import VueRouter from "vue-router";
// 引入路由器
import router from "./router";

// 应用插件
Vue.use(VueRouter);

Vue.config.productionTip = false;

// 创建vm
new Vue({
  el: "#app",
  render: (h) => h(App),
  router: router,
});

2.7.5 src/components/Banner.vue

显示banner信息

<template>
  <div class="row">
    <div class="col-xs-offset-2 col-xs-8">
      <div class="page-header"><h2>Vue Router Demo</h2></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Banner",
};
</script>

<style></style>

2.7.6 App.vue

引入Banner组件，并借助vue-router库提供的特殊标签实现路由的切换以及指定组件的呈现位置

<template>
  <div>
    <div>
      <Banner> </Banner>
      <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
          <div class="list-group">
            <!-- 原始html中a标签实现页面的跳转 -->
            <!-- <a class="list-group-item" href="./about.html">About</a> -->
            <!-- <a class="list-group-item active" href="./home.html">Home</a> -->

            <!-- Vue中借助router-link标签实现路由的切换 -->
            <router-link
              class="list-group-item"
              active-class="active"
              to="/about"
              >About</router-link
            >
            <router-link
              class="list-group-item"
              active-class="active"
              to="/home"
              >Home</router-link
            >
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel">
            <div class="panel-body">
              <!-- 指定组件的呈现位置 -->
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "./components/Banner.vue";
export default {
  name: "App",
  components: {
    Banner,
  },
};
</script>

2.7.7 bootstrap.css

具体可参照：

Vue知识点整理（四）- Vue中的ajax（1）中 2.1.4 bootstrap.css - 第三方样式

三、嵌套路由

1. 配置路由规则，使用children配置项：

  routes: [
    {
      path: "/一级路径1",
      component: 组件1,
    },
    {
      path: "/一级路径2",
      component: 组件2,
      // 通过children配置子级路由
      children: [
        {
          path: "二级路径1",  // 此处一定不要多写"/"
          component: 二级组件1,
        },
        {
          path: "二级路径2",  // 此处一定不要多写"/"
          component: 二级组件2,
        },
      ],
    },
  ],

2. 跳转（要写完整路径）：

<router-link to="/一级路由路径/二级路由路径">导航栏命名</router-link>

四、案例练习

以 2.7 案例为基础实现嵌套路由效果

4.1 News.vue - 二级路由相关组件

<template>
  <ul>
    <li>news001</li>
    <li>news002</li>
    <li>news003</li>
  </ul>
</template>

<script>
export default {
  name: "News",
};
</script>

<style></style>

4.2 Message.vue - 二级路由相关组件

<template>
  <ul>
    <li><a href="/message1">message001</a>&nbsp;&nbsp;</li>
    <li><a href="/message2">message002</a>&nbsp;&nbsp;</li>
    <li><a href="/message/3">message003</a>&nbsp;&nbsp;</li>
  </ul>
</template>

<script>
export default {
  name: "Message",
};
</script>

<style></style>

4.3 src/router/index.js

引入Message.vue 和 News.vue 组件，并通过children配置二级路由

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "../pages/About.vue";
import Home from "../pages/Home.vue";
import Message from "../pages/Message.vue";
import News from "../pages/News.vue";

export default new VueRouter({
  routes: [
    {
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
      // 通过children配置二级路由
      children: [
        {
          path: "message",
          component: Message,
        },
        {
          path: "news",
          component: News,
        },
      ],
    },
  ],
});

4.4 Home.vue

借助router-link标签实现二级路由的切换，，以及指定二级路由相关组件的呈现位置

<template>
  <div>
    <h1>Home相关内容</h1>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <!-- Vue中借助router-link标签实现路由的切换 -->
          <router-link
            class="list-group-item"
            active-class="active"
            to="/home/news"
            >News</router-link
          >
        </li>
        <li>
          <router-link
            class="list-group-item"
            active-class="active"
            to="/home/message"
            >Message</router-link
          >
        </li>
      </ul>
    </div>
    <!-- 指定组件的呈现位置 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style></style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^