Vue07：vue-router

1 vue-router

路由

当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由

路由：把 url 与 应用中的对应的组件进行关联，通过不同的 url 访问不同的组件

vue-router 的安装

npm i vue-router
// OR
yarn add vue-router

Vue.use()

通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

创建路由对象

通过 vue-router 提供的 Router 构造函数（类）创建路由对象，
路由对象包含：

• 当前使用的模式（hash、history）、
• 路由信息（url 与 组件的对应关系）

import Home from '@/views/Home';
import Item from '@/views/Item';
import About from '@/views/About';

Vue.use(VueRouter);

const router = new VueRouter({
    // 路由的配置对象

    // 路由模式：history，hash
    mode: 'history',

    // 路由映射表
    routes: [
        // 对象：url => 组件的映射关系
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/item/:id(\\d+)',
            name: 'Item',
            component: Item
        },
        {
            path: '/about',
            name: 'About',
            component: About
        }
    ]
});

router-view 组件

配置了路由信息以后，我们还需要中页面（组件）中指定路由对应的组件出现的位置，当当前访问的 url 与某个路由信息匹配的时候，该组件就会出现在 router-view 组件所在的位置

// App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <hr>
    <router-view/>
  </div>
</template>

2 动态路由

有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url

/item/1
/item/2
/item/3
...

我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理

...
{
  path: '/item/:itemId',
  name: 'item',
  component: Item
}
...

其中 :itemId 表示匹配的 url 中动态部分内容，如上面的 1,2,3 等，同时该值将被赋值给路由的变量 itemId

// home.vue
<template>
  <div class="home">
    <h2>商品列表</h2>
    <ul class="item-list">
      <li class="head">
          <span>名称</span>
          <span>价格</span>
          <span>操作</span>
      </li>
      <li v-for="item of items" :key="item.id">
          <span>
            <router-link :to='{name: "item", params:{itemId: item.id}}'>{{item.name}}</router-link>
          </span>
          <span>{{item.price|RMB}}</span>
          <span>
            <button>添加到购物车</button>
          </span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import {RMB} from '@/filters/RMB';
export default {
  name: 'home',
  data() {
    return {
      items: []
    }
  },
  filters: {
    RMB
  },
  created() {
    axios({
      url: '/api/items'
    }).then(res => {
      this.items = res.data;
    });
  }
}
</script>
<style>
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.item-list li {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px dotted #333;
}
.item-list li.head {
    font-weight: bold;
}
.item-list li span {
    min-width: 200px;
}
</style>

router-link

• 默认生成a标签
• 阻止a标签的默认行为，跳转不再刷新页面
• 可指定生成标签，同样可进行点击跳转
• 实际跳转时，都使用这个标签

   <router-link :to="item/1"></router-link>
       <img :src="item.cover" alt="" class="cover">
       <div class="name">{{item.name}}</div>
       <div class="price">{{item.price | rmb}}</div>
   </li>

tag指定标签名为li

            <ul class="items-list">
                <router-link :to="item/1" tag="li"
                class="panel" v-for="item of items" 
                :key="item.id" style="cursor:pointer">
                    <img :src="item.cover" alt="" class="cover">
                    <div class="name">{{item.name}}</div>
                    <div class="price">{{item.price | rmb}}</div>
                </router-link>
            </ul>

to 属性跳转动态路由url

推荐用上图来格式写动态路由的url拼接

路由对象

vue-router 会在组件中添加（注入）两个属性

• $router
• $route

$router 对象

该对象其实就是 new VueRouter(…) 得到的路由对象，通过该对象我们可以访问全局路由信息，调用路由下的方法，比如：go、back、push 等

$route 对象

通过该对象可以访问与当前路由匹配的信息

$route.params

获取动态路由有关的信息

// Item.vue
export default {
    name: "Item",

    data() {
        return {
            item: null
        }
    },
    async created() {
        this.error = false;
        // console.log(this.$router)
        // console.log(this.$route)
        let id = this.$route.params.id;
        let rs = await getItem(id);
        console.log(rs)
    },
}

    async created() {
        try {
            // console.log(this.$router)
            // console.log(this.$route)
            let id = this.$route.params.id;
            let rs = await getItem(id);
            // console.log(rs)
            this.item = rs.data;
        } catch (e) {
            throw e;
        }

    },

<template>
<div id="main">
    <ul class="items-list">
        <li v-if="error">商品不存在！！！</li>
        <li v-else-if="item">
            <img :src="item.cover" alt="" class="cover">
            <div class="name">{{item.name}}</div>
        </li>
        <li v-else>商品信息加载中...</li>
    </ul>
</div>
</template>

3 queryString

有的时候，我们可能也会用到 queryString

<select v-model="sort">
  <option value="desc">从高到低</option>
  <option value="asc">从低到高</option>
</select>

$route.query

我们可以通过路由对象 $route的 query 属性来获取 queryString
初始化page

...
    async created() {
        this.page = this.$route.query.page || 1;
        await this.getItems();
    }
...

$router.push编程式导航

有的时候，我们可能需要用到编程的方式来导航（跳转），而不是点击链接。如：当 page 发生改变的时候跳转

...
    methods: {
        changePage(page) {
            // this.getItems();

            // 如果路由的切换目标组件还是当前组件，那么这个组件将会被复用，而不是销毁重建
            this.$router.push({
                name: "Home",
                query: {
                    page: this.page
                }
            })
        },
...

路由组件的复用

• 为了提高性能，增强路由组件的复用，
• 如果路由的切换目标组件还是当前组件，那么这个组件将会被复用，而不是销毁重建
• 这个时候，我们就需要通过 watch 或者 路由相关的生命周期函数来处理切换路由导致的变化

watch 监听路由变化

如果切换的路由复用了组件，这个时候，我们可以使用 watch 监听 $route

watch: {
  $route(to, from) {
      console.log('$route');
  }
}

• to : 改变之后的 $route 对象
• from : 改变之前的 $route 对象

但是我们可以使用 vue-router 提供路由守卫 （路由有关的生命周期函数）来处理路由有关的业务逻辑

4 路由守卫

当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫

• 组件内守卫
• 路由独享守卫
• 全局守卫

组件内守卫

定义在组件内的与路由有关的生命周期函数（守卫）

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

beforeRouteEnter

• 路由第一次进入时调用

• 当路由解析完成，并中指定的组件渲染之前（组件 beforeCreate 之前），

• 不能这里通过 this 访问组件实例，需要通过 next 回调来进行调用

beforeRouteEnter (to, from, next) {
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  	next(vm => {
      // vm...
    })
}

beforeRouteUpdate

在当前路由改变，并且该组件被复用时调用

beforeRouteUpdate (to, from, next) {
    console.log("beforeRouterUpdate")
},

    beforeRouteUpdate(to, from, next) {
        console.log("beforeRouterUpdate");
        next();
        this.page = this.$route.query.page;
        this.getItems();
    },

beforeRouteLeave

导航离开该组件的对应路由时调用

beforeRouteLeave (to, from, next) {
    // 可以访问组件实例 `this`
}

路由守卫参数

to

即将要进入的目标 路由对象（$route）

from

当前导航正要离开的路由对象（$route）

next

路由确认回调函数，类似 Promise 中的 resolve 函数，一定要确保调用 next 函数，但是后续的导航行为将依赖 next 方法的调用参数

• next() : 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)

• next(false) : 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址

• next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航

路由独享的守卫

可以在路由配置上直接定义 beforeEnter 守卫，相对来说，应用不多

const router = new VueRouter(
  { 
    routes: [ 
      { 
        path: '/foo', 
        component: Foo, 
        beforeEnter: (to, from, next) => { 
          // ... 
      	}
    	} 
    ] 
  }
)

全局守卫

全局守卫是注册在 router对象（new VueRouter({…})）上的

• beforeEach
• beforeResolve
• afterEach

beforeEach

当一个导航触发时，全局前置守卫按照创建顺序调用，可用于做 用户鉴权处理

router.beforeEach((to, from, next) => {
    // next()
})

不掉用next就不会下一步的路由跳转

beforeResolve

在所有组件内守卫和异步路由组件被解析之后被调用

router.beforeResolve((to, from, next) => {
  // ...
})

afterEach

导航被确认后调用

router.afterEach((to, from) => {
  // ...
})

因为导航已经被确认，所以没有 next

5 嵌套路由/子路由

一些比较复杂的应用会有多层嵌套的路由和组件组成

在应用增加一个用户个人中心，用户中心又是由多个页面组成，例如：

子路由视图

有了子路由以后，还需要在视图组件中设置 router-view

// User.vue
<template>
    <div id="main">
        <h3>用户中心</h3>
        <ul class="left">
            <router-link exact tag="li" :to="{name: 'User'}">基本信息</router-link>
            <router-link tag="li" :to="{name: 'UserCart'}">我的购物车</router-link>
        </ul>
        <div class="right">
            <!-- 右侧 -->
            <!-- router-view : 显示与当前url（路由对象）匹配组件 -->
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    name: 'UserIndex'
}
</script>

添加路由与子路由

import User from './views/User.vue'
import Profile from './views/User/Profile'
import Cart from './views/User/Cart.vue'

// ...
{
    // /user/cart
    path: '/user',
    // name: 'User',
    component: UserIndex,
    meta: { requiresAuth: true },
    // 路由的嵌套要与页面视图中的router-view对应
    children: [
        {   
            // 默认子组件
            // path: '/user/profile',
            // 注意：如果path是以相对路径表示，子路由中的path是继承自父路由的path
            // path: 'profile',
            // 默认就可以通过
            path: '',
            name: 'User',
            component: UserProfile
        },
        {
            path: '/user/cart',
            name: 'UserCart',
            component: UserCart
        }
    ]
},

children 属性

一个路由中的 children 表示嵌套的子路由

• 路由的嵌套要与页面视图中的router-view对应
• 如果path是以相对路径表示，子路由中的path是继承自父路由的path
• 子路由的 path 如果以 / 开头表示根路径，不再基于父级路径，否则基于父级 path

path: '/profile',

path: 'profile',

• 如果一个子路由的 path 为空，表示为默认子路由

path: '',

• 如果一个路由有默认子路由，则父级的 name 属性最好需要设置给这个默认子路由

6 重定向与别名

6-1 redirect 重定向

有的时候，我们会根据某种需求对用户请求的页面进行重新定位
重定向：重新 定位 方向 目标url /user => /login
重定向使用场景

1. 鉴权后的重定向 /user => /login
2. 静态重定向

比如这个url早期设计比较随意，名字其实并不太规范

{
	path: '/guanyuwomen',   // 关于我们的页面
}

之后通过以下方式修改其实有问题：搜索引擎记录的地址不会更改

path: '/about',
name: "About",
component: About

使用重定向的方法就能解决这一问题

path: '/guanyuwomen',	
redirect: { name: 'About' }

案例

现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道

组件

// BookChoose.vue
<template>
    <div>
        <router-link :to="{name: 'book-boy'}">男生</router-link>
        <span> | </span>
        <router-link :to="{name: 'book-girl'}">女生</router-link>
    </div>
</template>

// BookBoy.vue
<template>
    <div>
        BookBoy
    </div>
</template>

<script>
export default {
    name: 'BookBoy',
    created() {
        localStorage.setItem('book-type', 'book-boy');
    }
}
</script>

// BookGirl.vue
<template>
    <div>
        BookGirl
    </div>
</template>

<script>
export default {
    name: 'BookGirl',
    created() {
        localStorage.setItem('book-type', 'book-girl');
    }
}
</script>

路由配置

{
  path: '/book',
  name: 'book',
  // redirect: { name: 'book-choose' }
  redirect: to => {
    let type = localStorage.getItem('book-type')
    return { name: type || 'book-choose' }
  }
},
{
  path: '/book-choose',
  name: 'book-choose',
  component: BookChoose
},
{
  path: '/book-boy',
  name: 'book-boy',
  component: BookBoy
},
{
  path: '/book-girl',
  name: 'book-girl',
  component: BookGirl
}

6-2 alias 别名

• 重定向，是从一个路由切换到另外一个路由，而别名是不同的路由显示同一个页面，
  比如：/user 是用户中心的路由，/member ，我们也可以给这个页面定义另外一个路由
• 虽然在某些时候，重定向与别名有类似的效果，但是，别名不存在跳转，浏览器地址栏上显示的 URL并不会切换

举例

1. 你去找A办事，A给你办了，你去找B办事，B也给你办了，都能给你办
2. 别名：给一个页面（组件、视图）起多个名字（配置多个不同的url）

{
    path: '/login',
    alias: '/signin',  // path 的别名
    name: 'Login',
    component: Login
},

url不同，但是结果是一样的

6-3 404 路由配置

写在最后，表示出了配置的路由以外，其他URL一律显示404

{
  path: '*',
  component: NotFound
}

7 路由组件传参

我们通常把路由直接映射（绑定）的组件称为 路由组件，也只有路由组件才能直接调用路由有关对象：$router、$route

当我们一个组件即希望作为路由组件使用，又可能作为功能组件（某个页面中的一部分）去使用，这个时候路由组件传参的方式来做到这点

案例

我们对 item.vue 组件进行改造，当我们在 home.vue 的商品列表上移入移出，出现商品信息提示层

// Home.vue
<template>
	...
  <li v-for="item of items" :key="item.id">
    <span>
      <router-link @mouseover.native="mouseover(item.id, $event)" @mouseout.native="mouseout(item.id, $event)" :to='{name: "item", params:{itemId: item.id}}'>{{item.name}}</router-link>
    </span>
    <span>{{item.price|RMB}}</span>
    <span>
      <button>添加到购物车</button>
    </span>
  </li>
	...
	<div class="tip" :style="{left: tip.left, top: tip.top}" v-show="tip.isShow">
    <Item :itemId="tip.itemId"></Item>
  </div>
	...
</template>
<script>
...
export default {
  ...,
  data() {
    return {
      items: [],
      tip: {
        itemId: 0,
        isShow: false,
        left: 0,
        top: 0
      }
    }
  },
  ...
  methods: {
    ...,
    mouseover(itemId, e) {
      let pos = e.target.getBoundingClientRect();
      this.tip.itemId = itemId;
      this.tip.left = pos.left + pos.width + 10 + 'px';
      this.tip.top = pos.top + 'px';
      this.tip.isShow = true;
    },
    mouseout(itemId, e) {
      this.tip.isShow = false;
    }
  }
}
</script>
<style>
...
.tip {
  position: fixed;
  left: 0;
  top: 0;
  border: 1px solid #000;
  background: #fff;
  padding: 10px;
}
</style>

因为原来的 Item.vue 组件时通过 this.$route.params.itemId 来接收 itemId 的，但是作为功能组件 itemId 需要通过 prop 来传入了，这个时候，我们需要对 Item.vue 组件进行改造

<template>
    <div>
        <template v-if="item">
            <h2>商品详情 - {{item.name}}</h2>
            <dt>ID</dt>
            <dd>{{item.id}}</dd>
            <dt>名称</dt>
            <dd>{{item.name}}</dd>
            <dt>价格</dt>
            <dd>{{item.price|RMB}}</dd>
        </template>
        <template v-else>
            <h2>没有该商品信息</h2>
        </template>
    </div>
</template>
<script>
import axios from 'axios';
import {RMB} from '@/filters/RMB';
export default {
    name: 'item',
    props: ['itemId'],
    data() {
        return {
            item: null
        }
    },
    filters: {
        RMB
    },
    watch: {
        itemId() {
            this.getItem();
        }
    },
    created() {
        // let itemId = Number(this.$route.params.itemId);
        this.getItem();
    },
    methods: {
        getItem() {
            if (this.itemId) {
                axios({
                    url: `/api/item/${this.itemId}`
                }).then(res => {
                    this.item = res.data;
                }).catch(err=>{});
            }
        }
    }
}
</script>

但是这个时候，我们的 Item.vue 可以接收来自 props 的参数，却不可以处理来自路由的 params 参数了。
为了能给让 Item.vue 组件既能接收 props 传递的参数，也能接收 route.params 传递的参数，需要对 路由 也进行一些改造

{
  path: '/item/:itemId',
  name: 'item',
  component: Item,
  props: true
}

默认处理

当 props 设置 为 true，那么 route.params 中的数据自动就会被设置为组件属性与组件原有props进行合并
但是要保证组件也有有 itemId

对象模式的

我们也可以有选择的返回 props

{
  path: '/item/:itemId',
  name: 'item',
  component: Item,
  props: {a: 1, b: 2}
}

回调函数模式

也可以使用回调函数模式
props 返回的对象将被合并到组件的props中

{
  path: '/item/:itemId',
  name: 'item',
  component: Item,
  props: r => ({ itemId: Number(r.params.itemId) })
}

8 数据获取

有的时候，进入某个路由以后，我们需要从服务端获取数据，比如 /item/:itemId ，通常，我们有两种方式来实现

• 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据，在数据获取期间显示加载中之类的 loading 提示
• 导航完成之前获取： 导航完成之前，在路由进入的守卫中获取数据，在数据获取成功以后执行导航。

这两种方式都没有任何问题（对错、好坏），自行选择

导航完成之后获取

<template>
    <div>
        <template v-if="loading">
            Loading......
        </template>

        <template v-if="hasError">
            <h2>没有该商品信息</h2>
        </template>

        <template v-if="item">
            <h2>商品详情 - {{item.name}}</h2>
            <dt>ID</dt>
            <dd>{{item.id}}</dd>
            <dt>名称</dt>
            <dd>{{item.name}}</dd>
            <dt>价格</dt>
            <dd>{{item.price|RMB}}</dd>
        </template>
    </div>
</template>
<script>
import axios from 'axios';
import {RMB} from '@/filters/RMB';
export default {
    name: 'item',
    props: ['itemId'],
    data() {
        return {
            loading: false,
            hasError: false,
            item: null
        }
    },
    filters: {
        RMB
    },
    watch: {
        itemId() {
            this.getItem();
        }
    },
    created() {
        this.getItem();
    },
    methods: {
        getItem() {
            this.loading = true;
            if (this.itemId) {
                axios({
                    url: `/api/item/${this.itemId}`
                }).then(res => {
                    this.item = res.data;
                }).catch(err=>this.hasError=true).then(_=>{
                    this.loading = false;
                });
            }
        }
    }
}
</script>

导航完成之前获取

• 进入路由就开始获取数据，但是只有在请求完成以后再调用next来确认导航
• beforeRouteEnter 周期是组件被实例化之前就执行的，这个时候没有 this
• 所以要获取this的话可以使用参数to来获取

console.log("to", to);

回调函数next中的参数vm就是组件实例

      next( vm => {
        // vm 组件实例对象
        console.log('next-vm', vm);
        vm.item = rs.data;
      } );

// item.vue

<script>
export default {
  ...,
  beforeRouteEnter( to, from, next ) {
    console.log('开始');
    return axios({
      url: `/api/item/${to.params.itemId}`
    }).then(res => {
      // 注意 beforeRouteEnter 还不能获取组件实例
      next(vm => {
        vm.item = res.data;
      });
    }).catch(err=>{
      next(vm => {
        vm.hasError = true;
      });
    });
  },
  beforeRouteUpdate(to, from, next) {
    return axios({
      url: `/api/item/${to.params.itemId}`
    }).then(res => {
      // 注意 beforeRouteEnter 还不能获取组件实例
      this.item = res.data;
    }).catch(err=>{
      this.hasError = true;
    });
  }
}
</script>

扩展 - nprogress

http://ricostacruz.com/nprogress/

安装

npm i nprogress
// OR
yarn add nprogress

使用

配合 vue-router 全局守卫

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const router = new Router({
  //...
});
// 进入导航
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

// 导航完成
router.afterEach((to, from, next) => {
  NProgress.done()
})

export default router

9 路由动效与滚动行为

9-1 路由动效

利用 transition 组件，我们还可以给路由导航加上动效

// App.vue
<template>
...
<transition name="fade">
  <router-view/>
</transition>
...
</template>
<style>
.fade-enter-active {
  transition: opacity 1.5s;
}
.fade-leave-active {
  transition: none;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

9-2 滚动行为

• 前端路由并没有重载整个浏览器，只是通过 DOM 进行了局部更新。
• 所以，有的时候，浏览器的一只状态会被保持
• 比如 滚动条，当我们在一个页面中滚动滚动条，然后跳转到另外一个页面，滚动条会保持在上一个页面中，我们其实更希望滚动条能回到页面顶部，就像重载了整个页面一样

const router = new VueRouter({
  routes: [...],
  scrollBehavior: () => ({ y: 0 })
});

后退/前进

如果希望点击回退的时候，滚动条能够保留之前滚动的位置
正对 后退/前进 行为，会提供一个 savedPosition 参数，通过该参数返回历史记录中的滚动值

    scrollBehavior: (to, from, savedPosition) => {
        console.log('savedPosition', savedPosition)
        return savedPosition ? savedPosition : {
            x:0,
            y:0
        }
    },

9-3 路由元信息

如果需要鉴权的路由比较多的时候
定义路由的时候可以配置 meta 字段

通过 meta 定义要验证的路由

在需要验证的路由加上meta: { requiresAuth: true }

const router = new Router({
  routes: [
    {
      path: '/user',
      component: User,
      children: [
        {
          path: '',
          name: 'user',
          component: Profile,
          meta: { requiresAuth: true }
        },
        {
          path: 'cart',
          name: 'user-cart',
          component: Cart,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

通过判断是否有需要鉴权的字段进行鉴权

const isLogin = true;

router.beforeEach((to, from, next) => {
  NProgress.start()

  if (to.meta.requiresAuth && !isLogin) {
      next({
        name: 'login',
      })
  } else {
    next()
  }
  
})

另一种写法

• 路由全局守卫的beforeEach中to参数下有个meta属性
• to中的mached属性会记录所有需要鉴权的路由
• 所以可以通过判断mached中有一个满足就进行鉴权
  

const isLogin = true;
router.beforeEach((to, from, next) => {
    console.log("to", to);
    if (to.matched.some( t => t.meta.requiresAuth )) {
    // if (false) {
        console.log('需要鉴权');
        // 如果当前路由需要验证
        if (userInfo.id > 0) {
            // 如果当前以及登录了，就直接放行
            next();
        } else {
            // 跳转到登录页
            next({ name: 'Login' });
            // next();
        }
    } else {
        // 不需要验证的路由，直接放行
        next();
    }
})

10 路由懒加载

• 当打包构建应用时，会打包所有的JavaScript 包，会变得非常大，影响页面加载。
• 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
• 方法是通过函数的形式加载，要在调用这个组件函数的时候才进行导入，也就是所谓的异步加载

const Home = () => import('@/views/Home');
const Item = () => import('@/views/Item');
const Comments = () => import('@/views/Comments');
const About = () => import('@/views/About');
const Login = () => import('@/views/Login');
const UserIndex = () => import('@/views/user/Index');
const UserProfile = () => import('@/views/user/Profile');
const UserCart = () => import('@/views/user/Cart');
const NotFound = () => import('@/views/NotFound');

预请求：实际上没有加载数据，只是拉取了对应的头信息，会在需要的时候再加载数据

或者通过配置webpack

    {
      path: '/user',
      component: () => import(/* webpackChunkName: "user" */ './views/User.vue'),
      meta: { requiresAuth: true },
      children: [
        {
          path: '',
          name: 'user',
          component: () => import(/* webpackChunkName: "user" */ './views/User/Profile.vue')
        },
        {
          path: 'cart',
          name: 'user-cart',
          component: () => import(/* webpackChunkName: "user" */ './views/User/Cart.vue')
        }
      ]
    },