三、vue之router 

此时vue的脚手架、创建项目已经完成。

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

。。。

三、vue之router 随笔 第1张

 

vue的运行流程

index.html-->main.js-->App.vue-->router/index.js 

1. 首先项目的启动页面是index.html , 在里面有一个id="app"的div

  项目启动的时候,会加载main.js,在main.js会实例化vue, 实例化vue的时候,会指定路由,模板,组件,以及挂载点信息,

三、vue之router 随笔 第2张

2.main.js(核心文件)

三、vue之router 随笔 第3张

 

3.router--index.js(路由组件)

项目启动的时候,会加载router中定义定义的路由信息,定义如下

三、vue之router 随笔 第4张

4.App.vue(项目入口文件)

页面路由跳转到HelloWorld的时候,会把HelloWorld组件加载到App.vue页面中显示,APP.VUE代码

三、vue之router 随笔 第5张

 

这样就完成了整个页面的启动和加载的流程...

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄