三、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. javascript闭包以及闭包的作用

    什么是闭包?———>是一个函数,一个可以访问其他函数内部数据的函数. 栗子一: function foo() { var a = 1; } function fn() { console.log ...

  2. Vue.js 2.x笔记：服务请求axios（8）

    1. axios简介 vue2.0之后,推荐使用axios. axios官方地址:https://github.com/axios/axios 2. axios安装 npm安装: npm instal ...

  3. Linux-存储管理

    存储基础知识 从工作原理区分: 机械   HDD 固态   SSD SSD的优势: SSD是摒弃传统磁介质,采用电子存储介质进行数据存储和读取的一种技术,突破了传统机械硬盘的性能瓶颈,拥有极高的存储性 ...

  4. yii2 gridview默认排序

    Yii2 GridView 使用起来很方便,但是默认排序很是个问题,数据默认按 主键 正序排列 但是在使用过程中,大多数数据默认是 倒序才符合正常思维的. 第一次 的解决方法是在 直接为 Model添 ...

  5. python实现查找文件

    import os.pathwhile True: rootdir=input('请输入遍历文件夹的绝对路径:(q退出)') if rootdir=='q': break if not(os.path ...

  6. (双指针 二分) leetcode 167. Two Sum II - Input array is sorted

    Given an array of integers that is already sorted in ascending order, find two numbers such that the ...

  7. 第八周博客作业<西北师范大学|李晓婷>

    1.助教博客链接:https://home.cnblogs.com/u/lxt-/ 2.作业要求链接:http://www.cnblogs.com/nwnu-daizh/p/10687492.html ...

  8. C# webapi 上传下载图片

    客户端上传文件 string url = url + "webUploadFile"; Uri server = new Uri(url); HttpClient httpClie ...

  9. 关于Mac 系统mysql 乱码问题

    这是由于客户端和服务端的编码没有同一 首先我们先在终端连接mysql  连接方法 mysql -u 用户名  -p  即可 然后输入你的密码 这里就不多说了 然后我们输入   show variabl ...

  10. STM32的内存管理

    ref:https://www.cnblogs.com/leo0621/p/9977932.html 这里针对STM32F407芯片+1M外部内存的内存管理!(全篇是个人愚见,如果错误,请不吝指出!) ...