PHPer快速上手VUE——边学边练5–利用路由进行页面跳转

    |     2020年6月23日   |   志怪故事   |     评论已关闭   |    1

看了不少有关vue路由的文档,基本上都是在单页面操作。很少有系统性的路由例子。所以上一篇我把路由的生产状态的如何使用的代码贴了出来。vue路由的功能很多,我只是把常用的功能写了出来。

这一篇,我们先回想一下,我之前文章里,说要做一个头部和尾部的公用组件,我直接把头部的代码贴出来,因为它也涉及到了路由的跳转。

我们都知道,大部分手机端页面,最上部分,有个 < 回退,点击后回退到上一页,头部组件里,就有这部分代码,大家仔细看一下,代码很简单。

  • $route.meta.title ,就是每个页面路由中定义的title标题
  • this.$router.back() 返回上一页 ,还有个 this.$router.go(-1)也是有类似的效果
  • this.$router.push(‘home’) 将路由定义到路由表name = home的页面

同样,首页的九宫格代码里也包含了跳转:

 

我只做了两个页面,所以,只放了这两个页面在数组里。。

还有一个需要提醒大家的:

使用我这种方式的路由表,url会出现#,如何取消?

还有一个,就是如何指定app的首页

至此,大家就完成了vue的初始入门,接下来还有页面状态,参数传递,数据状态值存储等等,那些编程类的东西,对于phper应该不在话下了。

api的代码我没有贴出,其实axio类似ajax,不过要需要学习es6语法。

路由的一些小资料:https://www.cnblogs.com/yadi001/p/12844872.html

 

上一篇:

没有了

已经是最新文章

噢!评论已关闭。