秒速赛车技巧-秒速赛车规律_官网-秒速赛车走势图
当前位置:主页 > 秒速赛车技巧 > 正文

秒速赛车前五后五技巧你不知道的Vuejs - Vuejs 自定

  对于单页面应用,前端路由是必不可少的,官方也提供了vue-router 库供我们方便的实现,但是如果你的应用非常简单,就没有必要引入整个路由库了,可以通过 Vuejs 动态渲染的API来实现。

  我们知道组件可以通过template来指定模板,对于单文件组件,可以通过template标签指定模板,除此之外,Vue 还提供了我们一种自定义渲染组件的方式,那就是渲染函数 render,具体render的使用,请阅读官方文档。

  首先,在src目录先创建layout/index.vue文件,用来作为页面的模板,代码如下:

  最后就是我们最重要的步骤了,改写main.js,根据页面url动态切换渲染组件。

  简易版本其实并没有实现前端路由,点击页面切换会重新全局刷新,然后根据window.location.pathname来初始化渲染相应组件而已。

  接下来我们来实现前端路由的history模式。要实现页面 URL 改变,但是页面不刷新,我们就需要用到history.pushState()方法,通过此方法,我们可以动态的修改页面 URL,且页面不会刷新。该方法有三个参数:一个状态对象,一个标题(现在已被忽略),以及可选的 URL 地址,执行后会触发popstate事件。

  那么我们就不能在像上面一样直接通过标签a来直接切换页面了,需要在点击a标签是,禁用默认事件,并执行history.pushState()修改页面URL,秒速赛车前五后五技巧并更新修改app.currentRoute,来改变我们想要的VueComponent属性,好了原理就是这样,我们来实现一下。

  对于src/main.js文件,其实不需要做什么修改,只需要将routes对象修改为模块引入即可。如下:

  好了,我们的history模式的路由已经修改好了,点击头部的链接,页面内容改变了,并且页面没有刷新。

  但是有个问题,就是当我们点击浏览器 前进/后退 按钮时,页面 URL 变化了,但是页面内容并没有变化,这是怎么回事呢?

  因为当我们点击浏览器 前进/后退 按钮时,app.currentRoute并没有发生改变,但是它会触发popstate事件,所以我们只要监听popstate事件,然后修改app.currentRoute就可以了。

  这样我们现在无论是点击页面中链接切换,还是点击浏览器 前进/后退 按钮,我们的页面都可以根据路由切换了。

  既然实现history 模式,怎么又能少得了hash 模式 呢?既然你这么问了,那我还是不辞劳苦的带着大家实现一遍吧(卖个萌~)。

  也就是说它是页面 URL中 以#开头的一个字符串标识。而且当它发生变化时,会触发hashchange事件。那么我们可以跟history 模式 一样对其进行监听就行了,对于history 模式,

  最后还有个问题,就是单个面初始化的时候,window.location.hash值为空,这样就会找不到路由映射。所以当页面初始化的时候,需要添加判断,如果window.location.hash为空,则默认修改为#/,这样就全部完成了。

  实际开发中,我们会根据不同项目需求,使用不同的路由方式,这里就需要我们添加一个mode参数,来实现路由方式切换,这里就不做讲解了,感兴趣的读者,可以自己尝试实现下。

  实际上,一个完整的路由库,远远不止我们上面演示的代码那么简单,还需要考虑很多问题,但是如果你的项目非常简单,不需要很复杂的路由机制,自己实现一遍还是可以的,毕竟vue-router.min.js引入进来代码体积就会增加26kb,具体如何取舍,还是视需求而定。

  尽信书,不如无书,当面对 问题/需求 时,多点自主的思考和实践,比直接接受使用要有用的多。

版权保护: 本文由 主页 原创,转载请保留链接: http://www.ecentiv.com//html/531.html