‍‍Vue

进阶系列教程将在本号持续发布一起查漏补缺学个痛快若您有遇到其它相关问题非常欢迎在评论中留言讨论达到帮助更多人的目的。

若感本文对您有所帮助请点个赞吧

2013年7月28日尤雨溪第一次在

没有状态管理也没有官方的构建工具只有一个库放到网页里就可以直接用了。

后来Vue.js

慢慢开始加入了一些官方的辅助工具比如路由Router、状态管理方案Vuex和构建工具Vue-cli等。

此时Vue.js

Progressive

TypeScript支持流式服务端渲染提供了跨平台的能力等。

Vue.js

在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。

Vue

传统路由通常指的是基于后端服务器的路由管理方式通过在服务器端配置路由规则来实现不同

URL

地址对应的页面渲染。

相比而言像vueRouter这样的前端路由他是通过

Vue.js

的组件系统来管理不同页面的渲染和切换。

就是说页面并没有跳转还是这一个页面只不过显示的是不同的组件而已。

vueRouter有两种模式一种是hash模式一种是history模式。

二者的区别如下

Hash

符号分割例如http://example.com/#/page

hashchange

的表现形式以及对浏览器历史记录的处理方式。

一般来说如果不需要考虑兼容性使用

History

initial-scale1.0titleVueRouter-Hash模式/title

/head

callback},init(){window.onhashchange

(){var

this.routes[hash]()}}}router.init()//

模拟用户使用var

document.getElementById(app)router.route(/,

(){view.innerHTML

initial-scale1.0titleVueRouter-History模式/title

/head

监听浏览器的前进后退window.addEventListener(popstate,(e){var

path

this.routes[path]()})}}router.init()var

links

document.querySelectorAll(a)links.forEach(item{item.addEventListener(click,

function(e){router.go(this.getAttribute(href))e.preventDefault()})})//

模拟用户使用var

document.getElementById(app)router.route(/,

(){view.innerHTML

进阶系列教程将在本号持续发布一起查漏补缺学个痛快若您有遇到其它相关问题非常欢迎在评论中留言讨论达到帮助更多人的目的。

若感本文对您有所帮助请点个赞吧

叶阳辉