Vue Router学习

Vue Router学习

本文插图引用bilibili coderwhy 老师的资料

一、认识路由

路由：就是通过互联网，把信息从源地址传输到目标地址的活动

路由的两种机制：路由和转送

在路由中有个叫做路由表的东西，路由表对网络中的资源进行了映射，根据请求的url，路由会将数据转送到相对应的目标地址。

二、什么是前端渲染，什么是后端渲染

在早期的时候，早到js还没出现的时候，那时候的html+css页面是在服务器已经渲染好了，就是通过jsp或者是PHP或是其它的一些技术把从数据库中请求到的数据已经把网页给渲染完成之后直接推送给浏览器的，这就是后端渲染。这种模式有着非常大的缺点，前后端的责任不够清晰，后端人员需要写一些html代码进行页面的渲染，而前端很多人员又不会java等后端开发的语言，而且通过Jsp开发出来的页面维护起来也是非常麻烦的，里面html杂糅着java代码。

到了ajax请求出现之后，网站开始出现了前后端分离的模式，后端只负责提供需要进行可视化的数据，不再负责任何页面的内容。而前端则负责面对api接口发送ajax请求，拿到数据后通过编写js代码创建一些DOM元素来进行数据的展示，这就是前端渲染。其实我之前开发的网站大部分是这种前后端分离的模式的，就是底层使用jQuery向服务器发送ajax请求，然后动态的创建一些东西再append到页面中，但是那时候我还是使用了jsp,不过只是根据用户类别进行某些东西是否展示而已。其实已经很接近前后端分离了。

前后端分离.png

三、什么是前端路由，什么是后端路由

像是之前开发使用的Tomcat服务器，它会解析请求信息的URL，然后看这个request是请求的哪个资源，在后端的资源都会被Tomcat服务器的后端路由使用一个映射表来映射，然后将这个对应的资源给返回。

前端路由也是差不多的思想，根据URL，然后显示这个URL匹配的资源，但是在URL改变的时候不进行整体的刷新。

前端路由.png

前端路由.png

四、改变URL的方式

• URL的hash

  可以通过URL的hash锚点(#)，可以改变URL但是页面不会刷新

  hash.png

当你通过location.hash输入一个东西后,location.href会变成

原先的内容+#+你输入的内容

• HTML的history模式

• history接口时HTML5新增的，它有五种模式改变URL而不刷新页面

  
  
  history.png

五、vue-router-安装和配置方式

六、路由映射配置呈现出来

七、路由的默认值和修改为history模式

八、router-link的其它属性的补充

九、通过代码跳转路由

十、vue-router-打包文件的解析

十一、vue-router-路由懒加载的使用

十二、路由的嵌套使用

十三、参数传递的两种方式

十四、vue-router中router和route的由来

通过源码来分析

Vue.use(router)安装router插件的时候默认会去调用插件的install方法

export function install (Vue) {
    ...
    //Vue是传入的Vue实例对象
    Vue.mixin({
    beforeCreate () {
        //isDef(this.$options.router)判断Vue实例对象中是否有router属性
      if (isDef(this.$options.router)) {
          //有的话就把这个Vue实例对象给赋值给这个Vue实例对象中的_routerRoot属性
        this._routerRoot = this
          //把这个实例对象的Options中的router赋值给这个实例对象的_router属性
        this._router = this.$options.router
        this._router.init(this)
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })
 Object.defineProperty(Vue.prototype, '$router', {
     //所以this._routerRoot._router就是Vue实例对象中的options里的router
    get () { return this._routerRoot._router }
  })
    //而route是指的动态获取的当前活跃的路由
  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })   
    ...
}

Object.defineProperty方法可以给某个对象添加属性，语法格式Object.defineProperty(需要添加属性的对象,属性名,属性值)

//在install方法中还有这两行代码，就是注册全局组件
//router-view和router-link
Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)

十五、全局导航守卫

如果想要在跳转某个路由的时候做些事情，比如说，当首页路由活跃的时候，网站标题document.title显示为首页，就是在浏览哪个页面的时候都显示那个页面的title。

就是监听路由的跳转，使用的是router.beforeEach函数，这个函数需要传一个函数作为参数，这个函数中有三个参数，to目标路由，from当前路由，next函数。next函数表示跳转，只有执行了这个函数才会跳转。

beforEach函数

beforeEach(guard: NavigationGuard): Function
/******************************************/
export type NavigationGuard < V extends Vue = Vue > = (
  to: Route,//to是目标路由
  from: Route,//当前路由
  next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
) => any

router.beforeEach((to,from,next)=>{
  document.title = to.matched[0].meta.title;
  next();//不使用就不会跳转
});

因为我们想要根据路由来改变网页标题，所以路由需要保存一些数据。路由如果需要保存数据，则在路由定义的时候添加一个meta属性，meta表示元数据，描述数据的数据。然后在这个meta属性中添加属性名属性值。

{
    path:"/home",
    component:Home,
    //保存数据
    meta:{
      title:'首页'
    },
  }

注意：在使用嵌套路由的时候，直接to.meta是获得不到这个路由的meta数据的，可以通过matched属性的第一个元素的meta属性拿到meta数据，因为使用了嵌套路由，这个路由的meta是undefined.

十六、这里记住一个查看源码很好的一个快捷键，就是Ctrl+单击，会进入这个函数或者这个类中。以前竟然不知道这个这么好用。