三、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. svg-sprite使用

    chainWebpack(config) { config.module .rule('svg') .exclude.add(path.resolve(__dirname,'src/assets/ic ...

  2. laravel 多条件查询

    select * from homework where (id between 1 and 10 or id between 50 and 70) and complete = 1 and (tit ...

  3. Session与Cookie(自定义Session)

    一.会话管理 会话管理: 管理浏览器客户端 和 服务器端之间会话过程中产生的会话数据. 域对象: 实现资源之间的数据共享. request域对象 context域对象 会话技术: Cookie技术:会 ...

  4. Jenkins+Git+Maven搭建自动化构建平台

    http://blog.csdn.net/xlgen157387/article/details/50353317

  5. cocos 碰撞系统

    前面的话 本文将简要介绍 Cocos Creator 中的碰撞系统,Cocos Creator 内置了一个简单易用的碰撞检测系统,支持圆形.矩形以及多边形相互间的碰撞检测 编辑碰撞组件 当添加了一个碰 ...

  6. AttributeError: 'NoneType' object has no attribute 'split' 报错处理

    报错场景 social_django 组件对原生 django 的支持较好, 但是因为 在此DRF进行的验证为 JWT 方式 和 django 的验证存在区别, 因此需要进行更改自行支持 JWT 方式 ...

  7. BZOJ 3000: Big Number （数学）

    题目: https://www.lydsy.com/JudgeOnline/problem.php?id=3000 题解: 首先n很大,O(n)跑不过,那么就要用一些高端 而且没听过 的东西——sti ...

  8. （转）调用System.gc没有立即执行的解决方法

    调用System.gc没有立即执行的解决方法 查看源码 当我们调用System.gc()的时候,其实并不会马上进行垃圾回收,甚至不一定会执行垃圾回收,查看系统源码可以看到 /** * Indicate ...

  9. 浅谈JS中逗号运算符的用法

    阅读本文的前提是,你能区分什么是表达式,什么是语句.还有明确运算符和运算数都是些啥东西.所谓的表达式就是一个JavaScript的"短语",JavaScript的解释器可以计算它, ...

  10. I2C(四)linux3.4(写代码)

    title: I2C(四)linux3.4(写代码) date: 2019/1/29 17:18:42 toc: true --- I2C(四)linux3.4(写代码) 老师的参考代码 https: ...