三、vue之router

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

。。。

vue的运行流程

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

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

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

2.main.js（核心文件）

3.router--index.js（路由组件）

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

4.App.vue（项目入口文件）

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

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

三、vue之router的更多相关文章

  1. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

  2. 三: vue组件开发及自动化工具vue-cli

    一: 组件化开发 1 组件 1: 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 2: 什么是组件 而在网页 ...

  3. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  4. 四 Vue学习 router学习

    index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...

  5. vue 中router.go；router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  6. 【vue】 router.beforeEach

    import store from '@/store' const Vue = require('vue') const Router = require('vue-router') Vue.use( ...

  7. vue & this.$router.resolve

    vue & this.$router.resolve gotoAutoUpdate (query = {}) { const { href } = this.$router.resolve({ ...

  8. Vue中router路由的使用、router-link的使用（在项目中的实际运用方式）

    文章目录 1.先看router中的index.js文件 2.router-link的使用 3.实现的效果 前提:router已经安装 1.先看router中的index.js文件 import Vue ...

  9. vue路由router的三种传参方式

    方法三: 传参页面传递参数方式: this.$router.push({ path: 'indexTwoDetails', query: { "id": id } }) 接受参数页 ...

随机推荐

  1. Python_if

    if if c语言中的if语句格式如下: if (条件) { 结果} python的格式与其不同,定义了自己的格式,更加的简明: if 条件 : 结果 print(111) if 3 > 2: ...

  2. dell服务器raid设置

    dell服务器raid设置 配置说明: 开机自检按ctrl+R键进入配置界面 如果服务器有raid卡,而不想做磁盘阵列时,需要做单盘RAID0,主要是为了让卡来识别一下硬盘 对raid进行操作很可能会 ...

  3. centos下安装Vmware-tools时出现的问题

    今天装了centos,想共享一个文件,需要安装Vmware-tools. 正常的步骤: 安装Vmware-tools 1.挂载VMwareTools光驱.虚拟机选项栏中选[虚拟机]-->[安装v ...

  4. Windows elasticsearch1.5.1安装

    http.cors.enabled: true http.cors.allow-origin: /.*/ network.host: 192.168.2.200 http.port: cluster. ...

  5. anaconda相关使用方法

    本文不涉及anaconda的安装,如果需要请自行搜索,cnblogs和CSDN都挺多的. conda安装完,大部分人都jupyter notebook的使用需求,jupyter的开启命令是什么呢? j ...

  6. Mongo集群Java连接时UnknownHostException错误

    今天在 Java 连接 Mongo 集群时报了一个超时的错误,但是在本地客户端连接单节点的时候却能连上,具体报的错误如下: Caused by: com.mongodb.MongoTimeoutExc ...

  7. /Date(1555554794000)/ 转换为日期格式

    /Date(1555554794000)/ 转换为 2019/4/18 new Date(parseInt('/Date(1555554794000)/'.substr(6, 13))).toLoca ...

  8. Scrapy 框架简介

    Scrapy 框架 介绍 Scrapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Scrapy的 ...

  9. 学习STM32F769DK-OTA例程之APP中断向量表重映射

    2019-04-17 [小记] APP的IAR工程中的中断向量表偏移是在系统库中的 __iar_program_start 处实现的 启动代码 stm32f769xx.s ;;;;;;;;;;;;;; ...

  10. <Android基础> (六) 数据存储 Part 1 文件存储方式

    第六章 数据存储 6.1 持久化技术 持久化技术指将内存中的瞬时数据保存到存储设备中,保证即使在手机或电脑关机的情况下,这些数据仍然不会丢失. 主要有三种方式用于简单地实现数据持久化功能:文件存储.S ...