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的路由组件挂载。的更多相关文章

  1. vue向路由组件传递props

    父子间的组件通讯是通过props和$emit来实现的,那么路由之间的通讯呢,往下看: 我现在再webpack里面有一个这样的结构, 我现在想test1里面的按钮点击跳转到test2里面,获得到test ...

  2. Vue.js路由组件

    1.如果在创建项目中,没有自动安装vue router,那就自行安装.cnpm install vue-router --save vue-router两种模式 hash模式和history模式. 默 ...

  3. vue(5)—— vue的路由插件—vue-router 常用属性方法

    前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...

  4. vue创建路由,axios前后台交互,element-ui配置使用,django contentType组件

    vue中创建路由 每一个vue组件都有三部分组成 template:放html代码 script:放js相关 style:放css相关 vue中创建路由 1.先创建组件 Course.vue 2.ro ...

  5. 067——VUE中vue-router之使用transition设置酷炫的路由组件过渡动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue路由组件vue-router

    一.路由介绍 Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are ...

  7. Vue之创建组件之配置路由!

    Vue之创建组件之配置路由!== 第一步: 当然就是在我们的试图文件夹[views]新建一个文件夹比如home 在home文件夹下面新建一个文件index.vue 第二步:在router目录下做如下事 ...

  8. VUE进阶(路由等)

    初级教程:http://www.cnblogs.com/dmcl/p/6137469.html VUE进阶 自定义指令 http://cn.vuejs.org/v2/guide/custom-dire ...

  9. vue的常用组件方法应用

    项目技术: webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例: 1.数组数据还未获取到,做出预 ...

随机推荐

  1. PHP中双引号引起的命令执行漏洞(Kuwebs代码审计 )

    在代码审计一书中提到Kuwebs的配置文件中可以利用PHP可变变量的特性执行代码 在PHP语言中,单引号和双引号都可以表示一个字符串,但是对于双引号来说,可能会对引号内的内容进行二次解释,这就可能会出 ...

  2. [原创] C# 金额大写

    突然要用到这个功能.也网上找了下. 最后还是自动动手写了一个. 估计这个还是有人要要的,所以顺便发出来吧. 引用保留 https://www.cnblogs.com/goldli/p/14105832 ...

  3. LeetCode初级算法之数组:217 存在重复元素

    存在重复元素 题目地址:https://leetcode-cn.com/problems/contains-duplicate/ 给定一个整数数组,判断是否存在重复元素.如果任意一值在数组中出现至少两 ...

  4. Scrum冲刺_Day07

    一.团队展示: 1.项目:light_note备忘录 2.队名:删库跑路队 3.团队成员 队员(不分先后) 项目角色 黄敦鸿 后端工程师.测试 黄华 后端工程师.测试 黄骏鹏 后端工程师.测试 黄源钦 ...

  5. js中单引号和双引号区别

    总结: 1.无论单引号还是双引号都是成双成对出现的,否则报错!浏览器在读到第一个双引号开始,第二个双引号结束,同样浏览器读取单引号也是第一个开始,第二个单引号结束,在使用的时候必须遵循规则那就是一对双 ...

  6. 题解-CF643G Choosing Ads

    CF643G Choosing Ads \(n\) 和 \(m\) 和 \(p\) 和序列 \(a_i(1\le i\le n)\).\(m\) 种如下操作: 1 l r id 令 \(i\in[l, ...

  7. 最短路径——BFS算法

    最短路径--BFS算法 单源最短路径问题 每对顶点间的最短路径 BFS求无权图的单源最短路径 bool visited[MAX_VERTEX_NUM]; //访问标记数组 //广度优先遍历 void ...

  8. Jmeter之分布式执行测试 (2)

    一. 安装Java 1.1下载JDK 1) Windows安装jdk,下载完成后,双击安装 2) Linux解压:tar -zxvf jdk-8u74-linux-x64.gz 1.2 Java环境变 ...

  9. virtualbox sharefolder mount fail

    ubuntu 14.04.1 LTS 64bit 安装完GuestAdditions后,在终端输入 sudo mount -t vboxsf sharename /mnt/share 提示错误:mou ...

  10. 深度学习炼丹术 —— Taoye不讲码德,又水文了,居然写感知器这么简单的内容

    手撕机器学习系列文章就暂时更新到此吧,目前已经完成了支持向量机SVM.决策树.KNN.贝叶斯.线性回归.Logistic回归,其他算法还请允许Taoye在这里先赊个账,后期有机会有时间再给大家补上. ...