vue-router详解

写在开头

官网的vue-router文档写的很好，但是结构是扩散性的，主要是理论的讲解，想要边看边写一个例子对于初学者来说还是有一定难度，我这里主要是从例子出发，把理论贯穿到实例当中。

一、基础知识介绍

1、前端路由和后台路由的区别，以及优缺点。

• 后端路由

我们在浏览器输入一个url地址时，就会向后台服务器发送一个请求，服务器响应后，会返回一个html文件给前端显示，可以看出每一个url地址的切换就是对服务器的请求。

• 前端路由

根据不同的url地址展示不同的内容或页面，无须依赖服务器的url地址不同而进行页面的操作。
优点:
1、用户体验好，不需要依赖后台服务器。2、可以根据需要请求不同的url地址。3、实现了前后端的分离，提高了开发的效率。
缺点：
1、对SEO不是很友好（单页面（SPA）的特点）。2、PC端浏览器的前进和后退需要重新刷新页面，没有合理的缓存数据。所以无法记住之前滚动的位置。3、初始化的时候可能会比较慢。

2、安装和引入

1、直接引用

2、npm 下载

npm install vue-router
3、代码引入实现
前提已经用脚手架搭建好了vue的项目，然年只需要在你的src下的main.js内写入以下代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router' 
Vue.use(VueRouter);
const router = new Router({
    routes
})
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: ''
})

然后在components下面生成home和test两个页面，并在router文件夹下建立index.js文件，内容如下：

const home = (resolve) => {
        import ('@/components/home').then((module) => {
            resolve(module)
        })
    } //通过import实现按懒加载，访问时才会加载相关页面，从而降低消耗，提高效率
const test = (resolve) => {
    import ('@/components/test').then((module) => {
        resolve(module)
    })
}
let routes = [{
    path: '/',
    component: home
}, {
    path: '/test',
    component: test
}, ]

// 通过数组拼接，可以实现多个模块化割分
routes = routes.concat([{ path: '*', redirect: '/' }]);
export default routes

总结

前期先做安装引用方面的介绍，后期再补全。