初识vue-router

目标1：网页开发发展，技术更迭
目标2：前端路由的原理
目标3(重点)：vue-router安装及其基本使用

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、网页开发历史 阶段发展

前面还有个非常简陋的，原始社会阶段不提也罢。

历程： 后端渲染 --> 前后端分离 --> SPA单页面富应用和前端路由

1.第一阶段：后端渲染

后端渲染：如JSP PHP ASP.NET，服务器捣鼓好(如sql操作)页面，然后直接吐给客户端。
后端路由：一个url地址对应一个页面，后端路由就是处理页面和url的映射关系。

2.第二阶段：前后端分离

前后端分离：Ajax技术出现，前端页面崽天天调接口取数据。后端专注数据，前端专注交互和可视化。
前端渲染：静态资源服务器吐html、css、js给客户端，js代码在客户端浏览器跑，调接口、拿数据、按逻辑渲染页面。(js在浏览器中执行，最 终渲染出来页面)

3.第三阶段：单页面复应用阶段(SPA)

前端路由：前端路由管理url和对应的组件的映射。利用hash或html5的history模式(改变url,且页面不刷新)。
SAP页面是在前后端分离的基础上加上了前端路由的功能。

---

二、深入前端路由原理(改变url而不刷新页面)

1.改变url而不刷新页面的两种办法

a.利用location.hash='字符串' ;
b.利用history.pushState({},'','字符串') ;

2.深入history模式

//pushState,利用了数据结构 栈结构。
history.back()     //----返回
history.forward()  //----前进
history.go(-1)     //----返回
history.go(1)      //----前进

结论： history.back()等同于history.go(-1)
      history.forward()等同于history.go(1)
注意：以上是pushState才可以，而replace则不适用
【histtory.replace()-----可改hash，但不能返回前进】

---

三、安装和使用vue-router

安装vue-router(脚手架初始化选项直接配置)。

在router的index.js中。
第一步：导入路由对象，并且调用Vue.use(VueRouter)；
第二步：创建路由实例，并且传入路由映射配置；
第三步：在Vue实例中挂载创建的路由实例。

工程中使用：
第一步：创建路由组件；
第二步：配置路由映射：组件和路径映射关系；
第三步：使用路由：通过 <router-link> 和 <router-view>

1.安装vue-router

项目运行时还需要用到，所以不-dev

npm install vue-router --save
#脚手架vue-cli创建前可选择vue-router安装

2.在模块化工程中使用vue-router

因为vue-router是一个插件，所以通过Vue.use()来安装路由功能
第一步：导入路由对象，并且调用Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置

//操作router文件夹下的index.js。index的好处是引用时只到当前文件夹就行。
   //配置路由相关的信息
   import VueRouter from 'vue-router'
   import Vue from 'vue'

   //1.通过Vue.use(插件)，安装插件
   Vue.use(VueRouter);
   //2.创建VueRouter对象
   const routers = [];
   const router = new VueRouter({
   //配置路由和组件之间的应用关系
        routers
   })
   //3.将router对象传入到Vue实例
   export default router

第三步：在Vue实例中挂载创建的路由实例。

//配置main.js
 import Vue from 'vue'
 import App from './App'
 import router from './router'

 Vue.config.productionTip = false

  new Vue({
      el:'#app',
      router,
      render:h => h(App)
   })

3.vue-router使用

第一步：创建路由组件 创建.vue文件

第二步：配置路由映射：组件和路径映射关系

//重点是对象数组类型那里
//操作router文件夹下的index.js。index的好处是引用时只到当前文件夹就行。
//配置路由相关的信息
    import VueRouter from 'vue-router'
    import Vue from 'vue'
    //导入组件
    import Home from '../components/Home.vue'
    import About from '../components/About.vue'

    //1.通过Vue.use(插件)，安装插件
    Vue.use(VueRouter)
    //2.创建VueRouter对象（对象类型数组）
    const routers = [
            {
               name: '/home',
               component: Home
             },
             {
                name: '/about',
                component: About
             }
     ]
     const router = new VueRouter({
     //配置路由和组件之间的应用关系
           routers
     })
     //3.将router对象传入到Vue实例
     export default router

第三步：使用路由：通过<router-link>和<router-view>

<div id="app"> 
     <router-link to="/home">首页</router-link>
     <router-link to="/about">关于</router-link>
     <router-view></router-view>
</div>

总结

安装路由，rourter的index.js中引用组件配置映射关系，通过router-link和router-view使用路由。