三、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. C#中 SQL语句

    SQL语句 SELECT STUFF(( (SELECT ',{' ),)) ),)) ),)) +'}' FROM ZSJTTD_HouseBuilding hb ,,'' ) HouseBuild ...

  2. 小程序组件中有bindinput监听报异常

    真机上有问题,ide上是没问题的,   组件有处理函数,结果异常说页面没有处理函数,加上处理函数后就不报异常了.

  3. dubbo+zookeeper+jenkins从打包开始

    一.jenkins中maven构建 有如下图构建设置 解释说明: pom.xml 此处jenkins打包依赖的主要配置文件(规则) settings.xml 全局配置文件,主要用于配置maven的运行 ...

  4. Java代理模式之Cglib代理

    Cglib代理,也叫做子类代理.在内存中构建一个子类对象从而实现对目标对象功能的扩展. CGLIB包的底层是通过使用一个小而快的字节码处理框架ASM,来转换字节码并生成新的类.不鼓励直接使用ASM,因 ...

  5. Microsoft Connect 2018 Summary

    https://www.microsoft.com/en-us/connectevent/

  6. Linux 下安装idea，提示svn版本太低问题

    在 RedHat 6.5 虚拟机上装了 Idea 2017, 将项目代码从 Windows 共享到虚拟机中,然后 Idea 提示 svn 版本太旧, 上网查资料说 Idea 2018 不支持1.7以下 ...

  7. [Ynoi2019模拟赛]Yuno loves sqrt technology I

    题目描述 给你一个长为n的排列,m次询问,每次查询一个区间的逆序对数,强制在线. 题解 MD不卡了..TMD一点都卡不动. 强制在线的话也没啥好一点的方法,只能分块预处理了. 对于每个块,我们设lef ...

  8. （转）ReentrantLock实现原理及源码分析

    背景:ReetrantLock底层是基于AQS实现的(CAS+CHL),有公平和非公平两种区别. 这种底层机制,很有必要通过跟踪源码来进行分析. 参考 ReentrantLock实现原理及源码分析 源 ...

  9. 【持续跟新】剑指Offer_Java实现

    [第一题 ]二维数组中的查找 package sword_finger_offer; import org.junit.jupiter.api.Test; /** * 剑指offer习题一 二维数组中 ...

  10. LinkedBlockingQueue阻塞队列详解

    主要api java.util.concurrent包下的新类.LinkedBlockingQueue就是其中之一,是一个阻塞的线程安全的队列,底层采用链表实现.        LinkedBlock ...