1.什么是路由？

路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动.

发展历程：

• 1.后端路由：
  • 一个页面有自己对应的网址, 也就是URL.
  • URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理.
  • Controller进行各种处理, 最终生成HTML或者数据, 返回给前端. 这就完成了一个IO操作
• 2.前后端分离:
  • 随着Ajax的出现, 有了前后端分离的开发模式.
  • 后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.
  • 这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.
• 3.SPA（单页面富应用）
  • 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由

2.前端路由的规则

• URL的hash
• Html的history模式
  • 方法：history.pushState、history.replaceState、history.go

3.vue-router基础

• vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

• 我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/

• vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来.

• 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

• 安装和使用：

  • npm install vue-router --save

  • 1. 配置路由相关的信息

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

  • 2.通过Vue.use(插件),安装插件（index.js）

    Vue.use(VueRouter)
    

  • 3.创建VueRouter对象（index.js）

    const routes = [
        {
        }
    ]
    

  • 4.配置路由和组件之间的应用关系（index.js）

    const router = new VueRouter({
        routes,
        mode:'history'
    })
    

  • 5.router对象传入到Vue实例（index.js）

    export default router
    

  • 6.挂载到Vue实例（main.js）

    import router from './router'
    

4.vue-router入门案列

• 1.创建路由组件

  

  • About.vue

  <template>
    <div>
        <h2>我是关于</h2>
        <p>我是关于内容，啊哈哈</p>
      <router-view/>
    </div>
  </template>
  
  <script>
  export default {
    name: 'About'
  }
  </script>
  
  <style>
  
  </style>
  
  

  • Home.vue

  <template>
    <div >
        <h2>我是首页</h2>
        <p>我是首页内容，啊哈哈</p>
  
        <router-link to="/home/news" tag="button" replace >新闻</router-link>
        <router-link to="/home/message" tag="button" replace >消息</router-link>
        <router-view></router-view>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Home',
    created(){
      console.log("home created");
    },
    destroyed(){
      console.log("home destroyed");
    },
    activated () {
  
    },
    deactivated () {
  
    }
  }
  </script>
  
  <style>
  
  </style>
  
  

• 2.配置组件和路径的映射关系

  

  //配置路由相关的信息
  import VueRouter from 'vue-router'
  import Vue from 'vue'
  
  import Home from '../components/Home.vue'
  import About from '../components/About.vue'
  import User from '../components/User.vue'
  
  //1.通过Vue.use(插件),安装插件
  Vue.use(VueRouter)
  
  //2.创建VueRouter对象
  const routes = [
      {
          path:'',
          component: Home
      },
      {
          path:'/about',
          component: About,
      },
  ]
  const router = new VueRouter({
      //配置路由和组件之间的应用关系
      routes,
      mode:'history'
  })
  
  
  //3.router对象传入到Vue实例
  export default router
  

• 3.使用路由

  <template>
    <div id="app">
      <h2>我是网站的标题</h2>
      <!-- 方法一 -->
      <router-link to="/home" tag="button" replace >首页</router-link>
      <router-link to="/about" tag="button" replace>关于</router-link>
      <h2>我是App中一些底部版本信息</h2>
    </div>
  </template>
  
  <script>
  export default {
    name: 'App',
  
  }
  </script>
  
  <style>
  </style>
  
  

5.vue-router细节处理

• 路由默认路径

//2.创建路由对象
const routes = [
  {
    path:'',
    redirect: '/home'
  },
  {
    path:'/home',
    component: Home
  },
  {
    path:'/about',
    component: About,
   }
 ]

• history模式

    const router = new VueRouter({
        routes,
        mode:'history'
    })

• 路由代码跳转

6.vue-router的懒加载

路由懒加载做了什么? 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块. 只有在这个路由被访问到的时候, 才加载对应的组件

// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User.vue'

// 懒加载
const Home = () => import('../components/Home.vue')
const About = () => import('../components/About.vue')
const User = () => import('../components/User.vue')