vue的路由组件挂载。
vue通过多种方式可以将组件挂载到一个页面上。挂载方式有四种。其实也并不止四种。这里呢就简单的提四种方式去怎样挂载组件。
第一种就是作为标签形式挂载。前面也提到。
后面的就是一般的挂载组件和按需挂载组件懒加载挂载组件。用的比较多的就是后面的两种。
1.懒加载模式下的组件加载:
1)第一步还是先创建vue组件。可以创建在views和components中,都可以。不要求严格。
2)创建完成后就配置路由。
法一:
const routes = [
{
path: '/',
name: 'top',
component: () => import('../components/common/top')
}
]

法二:
Vue.use(VueRouter)
const top = r => require.ensure([], () => r(require('../components/common/top')), 'top')
const routes = [
{
path: '/',
component: top
}
]

法三:
import Top from '../components/common/top'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: Top
}
]

上面这几种方式一个是从component,一个用const,一个在头部引入组件。
在主入口文件中只需要一个
<router-view></router-view>
标签就即刻。
更多的东西以后更新
vue的路由组件挂载。的更多相关文章
- vue向路由组件传递props
父子间的组件通讯是通过props和$emit来实现的,那么路由之间的通讯呢,往下看: 我现在再webpack里面有一个这样的结构, 我现在想test1里面的按钮点击跳转到test2里面,获得到test ...
- Vue.js路由组件
1.如果在创建项目中,没有自动安装vue router,那就自行安装.cnpm install vue-router --save vue-router两种模式 hash模式和history模式. 默 ...
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue创建路由,axios前后台交互,element-ui配置使用,django contentType组件
vue中创建路由 每一个vue组件都有三部分组成 template:放html代码 script:放js相关 style:放css相关 vue中创建路由 1.先创建组件 Course.vue 2.ro ...
- 067——VUE中vue-router之使用transition设置酷炫的路由组件过渡动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue路由组件vue-router
一.路由介绍 Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are ...
- Vue之创建组件之配置路由!
Vue之创建组件之配置路由!== 第一步: 当然就是在我们的试图文件夹[views]新建一个文件夹比如home 在home文件夹下面新建一个文件index.vue 第二步:在router目录下做如下事 ...
- VUE进阶(路由等)
初级教程:http://www.cnblogs.com/dmcl/p/6137469.html VUE进阶 自定义指令 http://cn.vuejs.org/v2/guide/custom-dire ...
- vue的常用组件方法应用
项目技术: webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例: 1.数组数据还未获取到,做出预 ...
随机推荐
- protobuf 协议浅析
目录 Protobuf 协议浅析 1. Protobuf 介绍 1.1 Protobuf 基本概念 1.2 Protobuf 的优点 1.3 Protobuf, JSON, XML 的区别 2. Pr ...
- Mysql为什么使用b+树,而不是b树、AVL树或红黑树?
首先,我们应该考虑一个问题,数据库在磁盘中是怎样存储的?(答案写在下一篇文章中) b树.b+树.AVL树.红黑树的区别很大.虽然都可以提高搜索性能,但是作用方式不同. 通常文件和数据库都存储在磁盘,如 ...
- C++异常之三 异常处理接口声明
异常处理接口声明 1 一般为了方便程序员阅读代码,提高程序的可读性,会将函数中的异常类型声明至函数头后方,不用一行一行的找抛出内容: 2 这里要注意一点,这属于C++的标准语法,但在VS中这个操作不被 ...
- mysql 8.0 改变数据目录和日志目录(一)
一.背景 原数据库数据目录:/data/mysql3306/data,日志文件目录:/data/mysql3306/binlog 变更后数据库目录:/mysqldata/3306/data,日志文件目 ...
- 轮廓检测论文解读 | Richer Convolutional Features for Edge Detection | CVPR | 2017
有什么问题可以加作者微信讨论,cyx645016617 上千人的粉丝群已经成立,氛围超好.为大家提供一个遇到问题有可能得到答案的平台. 0 概述 论文名称:"Richer Convoluti ...
- vue第三单元(webpack的应用-能根据具体的需求构建对应的开发环境)
第三单元(webpack的应用-能根据具体的需求构建对应的开发环境) #课程目标 理解什么是单页面应用. 掌握单页面和多页面的差异. 了解单页面的实现原理. 掌握模块化的方式实现webpack配置,区 ...
- 个人微信公众号搭建Python实现 -个人公众号搭建-总结(14.3.6)
@ 目录 1.主要技术:Flask,requests 2.实现的主要功能 3.目录说明 4.运行方式 关于作者 1.主要技术:Flask,requests requirements.txt如下 req ...
- 点击劫持(Iframe clickJack)练习
实验内容: 寻找一个合适的网站放入到iframe标签中.实验中测试了包括知网首页及登录界面.淘宝首页及登录界面,百度首页,微信下载界面.发现淘宝登录界面无法放入,会直接跳转到淘宝真实的登录界面,其他的 ...
- Java并发包之 CopyOnWriteArrayList
大家在学习Java的过程中,或者工作中,始终都绕不开集合.在单线程环境下,ArrayList就可以满足要求.多线程时,我们可以使用CopyOnWriteArrayList来保证数据安全.下面我们一起来 ...
- 面试级解析HashMap
------------恢复内容开始------------ 在介绍HashMap之前,有必要先给大家介绍一些参数的概念 HashMap的最大容量,capacity译为容量,capacity就是指Ha ...