PHPer快速上手VUE——边学边练4–简单学习vue路由

    |     2020年6月23日   |   学习偶记   |     评论已关闭   |    1

学习这个路由之前,我们先看一下如何我们自定义了头部导航和底部导航,页面如何引用。

APP.vue 源码:它是我们的根页面。我们把头部和尾部组件引入。

大家发现我使用了

这句话,这句话的意思是:假如 路由的meta里,isshowheard的值是true ,则显示头部组件。

OK,路由的第一个功能:在meta中,可以定义变量值

然后我们看一下main.js源码:

 

知识点

全局实例 以及 实例定义中的$ 参考资料:https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html

import utils from ‘./utils/util’ 这里放的是一些我自己写的公共函数,比如时间戳转日期。

until.js的源码

这里的自定义函数如何使用?因为main.js已经导入并且实例化了,所以页面中直接使用:

我们又发现main.js中的一条语句:import router from ‘./router/index’

从上图中可以看到,是导入了路由目录下的index.js文件。为什么不使用$实例化呢?我把/router/index.js代码贴出来。

从代码中,我们可以看出这个代码中,实例化了一个new Router。所以不用$来实例化。这样写,其实是将路由当作一个组件来看待。

import routes from ‘./router’ //加载当前目录下的router.js。router.js源码

说明:

A、所有要显示的页面都是组件,而组件需要import

B、APP是根,不用const 定义

C、export default 输出路由是 [] 数组,这是路由嵌套的概念

D、meta里可以放页面里需要的变量【是不是可以在这里设置哪些页面必须登录?】

E、我把orderlist放在home前面,执行起来第一个页面就是orderlist

下一节,就要用路由将两个页面关联起来。可以实现点击主页上的九宫格,跳转到订单列表页面。

知识库:vue路由:https://router.vuejs.org/zh/installation.html

小知识:动态加载路由表:https://www.cnblogs.com/cutone/p/9755088.html

噢!评论已关闭。