vue-router 前端路由介绍和使用

什么是前端路由？

hash值和组件之间的对应关系，当url中的hash值发生改变时，前端路由会检测到，这时路由会把当前hash值所对应的组件渲染到页面上。

怎么使用？

非路由组件的使用

非路由组件一般放置在components文件夹中，在使用的页面先引入组件，再进行注册，如下图所示，在app.vue中引入HelloWorld组件

路由组件的使用

1.vue-router插件的安装

npm install --save vue-router

 2.创建路由组件

在src下新建文件夹views用来放路由组件，home和login为新建路由组件

3.配置路由

（1）在src下新建router文件夹

 （2）index.js中配置路由的内容如下

// 配置路由相关信息

import Vue from 'vue'
import Router from 'vue-router'  //引入路由 

Vue.use(Router)  //使用路由插件

//创建路由对象
export default new Router({
    routes: [
        //配置路由组件之间的映射关系
        {
            path: '/home',
            name: 'home',
            component: () => import('@/views/home/index.vue') //路由懒加载
        },
        {
            path: '/login',
            name: 'login',
            component: () => import('@/views/login/index.vue')
        },
      
    ]
})

为什么要使用路由懒加载？

路由懒加载可以让组件只在用到的时候才会进行加载，这样可以减少首页加载用时

4.将Router挂载到vue实例上

5.使用路由

 可能会出现的问题

1.对应版本不兼容

安装的时候没有选择版本号，导致默认安装最新版本，可能与其他插件不兼容，需要重新安装旧版本，推荐使用稳定版本vue-router@3.5.2

这个只是路由使用的简单介绍，vue-router里面还有很多的用法，后续再一一总结出来