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. Python迭代器&生成器&装饰器

    1. 迭代器 1.1 可迭代对象(Iterator) 迭代器协议:某对象必须提供一个__next__()方法,执行方法要么返回迭代中的下一项,要么引起一个Stopiteration异常,以终止迭代(只 ...

  2. 从隔壁兄弟那爬点网页数据,整理成word文档

    package com.parse_report; import com.report.utils.ParseUrl; /** * Create by JIUN 2018/7/14 */ public ...

  3. tornado 作业 简单首页 登录页 个人中心

    s4 index.py 1 import tornado.ioloop 2 import tornado.web 3 import time 4 5 6 class IndexHandler(torn ...

  4. Python不同包之间调用注意事项

    1.不同包之间调用,因为在不同文件夹下,引用的时候加上包名就可以了.运行时,在eclipse直接运行没有问题.但是在,命令行运行时出现找不到模块的错误.原因是,Python只搜索当前目录和内置模块以及 ...

  5. 20201126-1 txt文件筛选与读写【】

    Exercise 1import os # 设置文件夹路径为'工作文件夹',获取文件夹下的所有文件和文件夹名称 path = './工作文件夹/' files_list = os.listdir(pa ...

  6. 从面试角度分析ArrayList源码

    注:本系列文章中用到的jdk版本均为java8 ArrayList类图如下: ArrayList的底层是由数组实现的,数组的特点是固定大小,而ArrayList实现了动态扩容. ArrayList部分 ...

  7. jmeter跨线程使用token

    项目的接口测试,今早所有接口都不通了,查看原因是登录接口地址变了..... 原来的方式是每个线程中都写了登陆接口来获取token,但是因为登陆接口地址改变的原因,要改好多个登陆接口,所以就想把toke ...

  8. Hexo结合Stun静态博客搭建从入门到入土

    摘要 安装npm,安装hexo相关依赖,安装主题stun 修改hexo配置,修改stun配置,部署到github,gitee实现静态访问 给博客加上全局搜索,访问量统计 hexo博客编写模板 tips ...

  9. RocketMQ源码分析 broker启动,commitlog、consumequeue、indexfile、MappedFileQueue、MappedFile之间的关系以及位置说明

    目录 1.MappedFile类属性说明 1.1.MappedFile类属性如下 1.2.MappedFile构造器说明 2.MappedFileQueue类说明 2.1.属性说明 2.2.Mappe ...

  10. SSRF深入学习

    爆出来的直接关于SSRF的漏洞有俩,①是weblogic,②是discuzz SSRF漏洞最主要的部分并不是SSRF 探测内网,而是可以写shell,反弹shell,虽然很多厂家把它归为低危漏洞,仔细 ...