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. 前端性能测试(H5性能测试)

    前端性能调优方法同样适用于H5. 1.H5前端性能知识点 学习前端性能,必须对HTTP协议有所了解. 1.1 浏览器渲染引擎 浏览器是Html解析和页面最终展示的工具. 浏览器的主要功能:将用户选择的 ...

  2. 【软件测试部署基础】npm的认识

    1. npm简介 先来看下官方介绍: npm makes it easy for JavaScript developers to share and reuse code, and it makes ...

  3. 乌云1000个PHP代码审计案例(1)

    前两天发现的宝藏网站:https://php.mengsec.com/ 在github上面找到了源代码:https://github.com/Xyntax/1000php,可以在自己的服务器上面搭建 ...

  4. 从零开始的sql注入学习(挖坑不填)

    首先,本人是小白,这篇文章也只是总结了一下大佬们的sql注入方法,要是有错,请各位大佬指出,以便学习. 虽然我是菜鸡,但是太过基础的sql注入问题也就不再重复的解释了.直接从常用的说起. 实战中常用的 ...

  5. LeetCode初级算法之数组:26 删除排序数组中的重复项

    删除排序数组中的重复项 题目地址:https://leetcode-cn.com/problems/remove-duplicates-from-sorted-array/ 给定一个排序数组,你需要在 ...

  6. mvvm和mvc区别?

    mvc和mvvm其实区别并不大.都是一种设计思想.主要就是mvc中Controller演变成mvvm中的viewModel. mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变 ...

  7. windows安装程序无法将windows配置为在此计算机上运行

    ----------------------------------------------- 解决办法: 当出现如上提示的时候,按下shift+f10 会打开命令窗口,进入到C:\windows\s ...

  8. Springboot mini - Solon详解(二)- Solon的核心

    Springboot min -Solon 详解系列文章: Springboot mini - Solon详解(一)- 快速入门 Springboot mini - Solon详解(二)- Solon ...

  9. Spring(一)--简介

    一.概述(什么是spring): Spring是分层的Java SE/EE应用full-stack(一站式)轻量级开源框架.他解决的是业务逻辑层和其他各层的松耦合问题,将面向接口的编程思想贯穿整个系统 ...

  10. SharePoint Online之通过JSOM发送邮件

    我们在SharePoint 开发过程中,经常会用到发邮件的功能,例如向Manager提醒有需要待办任务等等场景. 图片来自网站,如侵权,速删 一般我们会采用Workflow或者Power Automa ...