三、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. CentOS_7下安装MySQL

    卸载旧版本MySQl: 下载MySQ: MySQl官网:https://dev.mysql.com/downloads/mysql/ 版本自选,操作系统选Linux-Generic,64位系统或者32 ...

  2. git几个必知托管平台

      程序员必须知道的几个Git代码托管平台 说到Git代码托管平台,首先推荐的是GitHub,好多好的开源项目都来自GitHub,但是GitHub只能新建公开的Git仓库,私有 仓库要收费,如果你做的 ...

  3. nodejs 搭建本地静态服务器

    1. http-server 参看 https://www.npmjs.com/package/http-server 使用http-server搭建本地静态服务器 全局安装http-server n ...

  4. 【js】前端 js/jquery 常用代码和实践

    1.获取某天后几天的日期 //d为传入的日期 days为d后面的几天function getAfterDate(d,days){ var dd = new Date(d); dd.setDate(dd ...

  5. 对称加密之AES加密详解

    最近有人问我AES对称加密是啥,我回答了个大概,发现自己不能清晰的讲出来,特此记录,以供学习 一.对称加密 对称加密是最快速.最简单的一种加密方式,加密(encryption)与解密(decrypti ...

  6. Java基础 -- 深入理解迭代器

    在Java基础 -- 持有对象(容器)已经详细介绍到,集合(Collection)的种类有很多种,比如ArrayList.LinkedList.HashSet.... 由于集合的内部结构不同,很多时候 ...

  7. ddt运行测试方法时报错AttributeError: type object 'TestHttpRq' has no attribute 'test_http_rq_login'

    import unittest import ddt #装饰器 from ddt import ddt,data,unpack #导入ddt中的各个模块 from homework.unittest_ ...

  8. jsp:forward动作功能

    jsp:forward动作:引导请求者进入新的页面 例子:login.jsp <center><p>用户登录 </p> <form name="fo ...

  9. rocketmq 集群环境搭建配置

    rocketmq环境搭建配置: 一.   搭建三主集群,环境:centos-64 7.4 + RocketMQ-4.3.2 Master01: 192.168.102.68 Master02: 192 ...

  10. 080、Weave Scope 容器地图（2019-04-28 周日）

    参考https://www.cnblogs.com/CloudMan6/p/7655294.html   Weave Scope 的最大特点是会自动生成一张 Docker 容器地图,让我们能够直接的理 ...