Vue路由实现原理

版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/82770579

前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。

通过改变浏览器地址URL，在不重新请求页面的情况下，更新页面视图

有两种方式:

1.一种是# hash   ,    在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航 
2.一种是h5的history  ,     使用URL的Hash来模拟一个完整的URL

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

利用 Vue.js 提供的插件机制 .use(plugin) 来安装 VueRouter

vue-router是Vue.js框架的路由插件，它是通过mode这一参数控制路由的实现模式的：

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

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    }
  ]
})