美文网首页工作生活
Vue的路由实现 || vue-router的原理

Vue的路由实现 || vue-router的原理

作者: 没有卢果 | 来源:发表于2019-07-03 10:24 被阅读0次

hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;
特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
hash 模式下,仅hash 符号之前的内容会被包含在请求中,如[http://www.xxx.com](http://www.xxx.com/),因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

history模式:history采用HTML5的新特性;且提供了两个新方法:pushState()replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
history模式下,前端的 URL必须和实际向后端发起请求的URL 一致,如 [http://www.xxx.com/items/id](http://www.xxx.com/items/id)。后端如果缺少对/items/id的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果URL匹配不到任何静态资源,则应该返回同一个 index.html页面,这个页面就是你app依赖的页面。”

相关文章

  • 手写 Vue Router、手写响应式实现、虚拟 DOM 和 D

    Vue-Router 原理实现 一、Vue-Router 动态路由 二、Vue-Router 嵌套路由 三、Vue...

  • vue总结

    vue路由守卫 vue实现双向绑定原理 Vue生命周期: vue跨域方式 vue-router实现原理 vue-r...

  • 一起学Vue:路由(vue-router)

    前言 学习vue-router就要先了解路由是什么?前端路由的实现原理?vue-router如何使用?等等这些问题...

  • Vue路由 ---- vue-router

    vue-router 中常用的 hash 和 history 路由模式实现原理吗? Two Point!!! sp...

  • Vue 基础 - 前端路由

    使用vue-router实现前端路由 安装vue-router: 配置路由文件,并在vue实例中导入: 设置视图(...

  • Vue.js 学习笔记(三)

    路由 vue-router 的基本使用 定义组件 定义 vue-router 关联到 Vue 实例 实现 效果展示...

  • vue路由

    今日目标 1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够...

  • vue路由

    今日目标 1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够...

  • vue-router

    前端路由的基本原理 vue-router的基本使用 命名路由 路由参数 嵌套路由

  • 路由

    路由map 路由视图 路由导航 实现简单路由 import VueRouter from 'vue-router'...

网友评论

    本文标题:Vue的路由实现 || vue-router的原理

    本文链接:https://www.haomeiwen.com/subject/pqofhctx.html