Vue的路由系统（Vue Router）

vue路由，懒加载的使用与解析

全文约3500字，预计阅读时间为10分钟，预计理解事件15分钟，预计实操加理解约20分钟

关于Vue Router

Vue Router ：Vue中提供制作多页网站效果的技术

• 原生开发中通过切换html文件的方式来实现多页的效果----整个网页的切换

• 现代化的开发方式流行局部切换的效果

  • 原生相当于额——笔记本电脑

    • 集成化高，更换CPU就要更换电脑

  • 现代化的切换方式——台式

    • 内部配件想换就换

  • 用最小的小号来实现内容的切换

• 专业名：SPA – Single Page Application

  • 整个网页就一个页面
  • 然后通过局部切换实现多页效果

实现

前提：在创建项目的时候必须勾选**" Vue Router"**
检查：在项目的目录下有**“Router文件夹”**

实现路由/添加路由

1.找到这两个文件

2.修改文件

3.修改后尝试访问

http://localhost:8080/


http://localhost:8080/about
1
2
3
4

尝试一下在view文件夹下面创建1.vue然后尝试访问

http://localhost:8080/1
1

事实证明无法访问

所以我们要先找到router/index,js

添加这两段

  {
    path: '/1',
    name: 'hello',
    component: hello
  },
1
2
3
4
5

属性名分析：

• path属性：路由路径（访问时在浏览器地址框的子目录）
• name属性：为这个路由配置起个名字，后期调试时方便找bug
• component属性：组件名

懒加载

问题：但是在网站中有99个页面用户访问时我们该怎么办呢

• 选项一：网站刚加载的时候就加载用户使用的
  • 优点：用户进入不同页面的加载速度快，瞬间切换
  • 缺点：首次加载慢，需要大量操作，如果没有使用其他页面，就会造成不必要的资源浪费
• 选项二：网站刚加载，就全部加载完
  • 优点：首次加载速度快
  • 缺点：每个页面使用时都需要临时加载
• 最佳方案： 先加载常用的几个页面，吧不常用的使用懒加载

非懒加载方式

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import hello from '../views/1.vue'
import hellos from '../views/master.vue'

1
2
3
4
5
6

懒加载方式

语法

  {
    path:'/1',
    component:()=>import("../views/1.vue")
  },
1
2
3
4

• path:同上
• component：同上
• 原理：当我访问这个子级是就会调用下面的组件，由于js是从上到下运行的，所以上面的会先引入（非懒加载），然而可以把路由写为类似于回调函数的方式，所以当我们访问时就相当于调用回调函数，回调函数引入组件，这就是懒加载

router-link标签

router-link的由来

vue对a标签进行了封装，进而得到了更加强大的router-link标签

测试demo

   <template>
 <div>
   
   
   
   <div id="box">
     
     <router-view />
     <router-link to="/houme">首页router-link>
     <br>
     <router-link to="/about">关于我router-link>
     <br>
     <router-link to="/1">1router-link>
     
   div>
 div>
   template>
   
   <script>
     export default {
       
     }
   script>
   
   <style lang="scss" scoped>
     #box{
       background-color: orange;
       padding: 10px;
     }
   style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

点击之后看效果

提问：

既然router-link是基于a标签封装的那我直接使用a标签呢？

加入代码：

  <a href="/1">1a>
1

点击之后我们发现页面刷新了

所以不推荐使用a标签，因为那样基本上就属于全局刷新了…

分享一些样式

<style>
  a{
    display: inline-block;
    width: 70px;
    height: 20px;
    padding: 10px;
    background-color: rgb(212, 212, 212);
    margin: 5px;
    text-align: center;
    text-decoration: none;
    color: rgb(71, 71, 71);
    border-radius: 10px;
  }
  a:hover{
    display: inline-block;
    background-color: rgb(83, 83, 83);
    color: rgb(216, 216, 216);
  }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果：

总结

• path的路径必须带 ” / “ (开头）要不然不是一个完整的路径
• App.vue里面必须要有router-view标签因为这个标签是个占位符（路由切换显示的位置在这里面）不写的话就会无法显示
• router/index.js下的路由在前面的引入语句为非懒加载，通常会写常用的页面，懒加载应用于不常用的加载
• router-link标签是基于a标签来封装的所以在页面上显示的也是a标签但是不能在vue项目中直接书写a标签，因为这样就不会局部刷新而是全局
• 在书写路由时path和component是必须的，name推荐书写（为这个路由配置起个名字，后期调试时方便找bug）不写的话也不会有影响只是不方便找bug
• view和components里面的文件夹里的文件性质是不一样的，虽然两者都为组件但是前者为页面局部刷新的主要组件，后者为构成页面的一部分