vue router 导入方式

  vue router 的路由导入方式可用以下两种:

一:直接导入

import Hello from ‘@/components/Hello‘

@是在webpack.base.conf.js 配置:

 resolve: {
   extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
   alias: {
   ‘vue$‘: ‘vue/dist/vue.esm.js‘,
   ‘@‘: resolve(‘src‘)
   }
 }
 

二 :路由懒加载方式

   当打包构建应用时,Javascript包会变得非常大,影响页面加载,路由懒加载可以在路由被访问的

时候才加载对应的组件,这样就更加高效了。

const Foo = resolve =>{
 require.ensure([‘./Foo.vue‘,() => {
   resolve(require(‘./Foo.vue‘))
 }])
} 

  这里还有另一种代码分块的语法,使用 AMD 风格的 require,于是就更简单了:

const Foo = resolve => require([‘./Foo.vue‘], resolve);

  之后的使用就跟之前是一样的了

const router = new VueRouter({
  routes: [ { path: ‘/foo‘, component: Foo } ]
})

参考:https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

时间: 2024-08-15 09:48:57

vue router 导入方式的相关文章

Vue系列:Vue Router 路由梳理

Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 1.动态路由 动态路由,可以将某种模式匹配到的所有路由,并全都映射到同个组件. (通俗点,比如根

Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

vue router 参数获取

vue router 参数获取通常是通过$route.query和$route.params方法这里将这两种方式通过代码展示出来: 路由代码: import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import UserAdd from './components/UserAdd' import UserList from './components/UserList'

Vue Router 使用方法

安装 #直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 CDN 链接.上面的链接会一直指向在 NPM 发布的最新版本. 你也可以像 https://unpkg.com/[email protected]/dist/vue-router.js 这样指定 版本号 或者 Tag. 在 Vue 后面加载 vue-router,它会自动安装的: <script src="/path/to

一、Vue Router 的使用

什么是路由 路由是根据不同的url地址展示不同的内容或页面.可分为前端路由和后端路由. 后端路由:通过用户请求的url导航到具体的html页面:每跳转到不同的URL,都是重新访问服务端,然后服务端返回页面,页面也可以是服务端获取数据和模版组合,返回HTML,也可以是直接返回模版HTML,然后由前端再去请求数据,使用前端模版和数据进行组合,生成想要的HTML.(意味着,浏览器刷新页面.网速慢的话说不定屏幕全白再有新内容) 简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不

04 Vue Router路由管理器

路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发. Vue Router包含的功能有: 支持HTML5 历史模式或hash模式 支持嵌套路由 支持路由参数 支持编程式路由 支持命名路由 vue-router的基本使用 基本使用步骤 1.引入相关的库文件 导入vue文件为全局window对象挂载Vue构造函数

Android使用zxing(二维码工具类)类库的导入方式

zXing导入比较麻烦,很多新人要导入很久,关键是还不一定导入的对.下面总结下导入方式.希望对大家有所帮助.

013-HQL中级3-Hive四种数据导入方式介绍

Hive的几种常见的数据导入方式这里介绍四种:(1).从本地文件系统中导入数据到Hive表:(2).从HDFS上导入数据到Hive表:(3).从别的表中查询出相应的数据并导入到Hive表中:(4).在创建表的时候通过从别的表中查询出相应的记录并插入到所创建的表中. 一.从本地文件系统中导入数据到Hive表先在Hive里面创建好表,如下: hive> create table wyp > (id int, name string, > age int, tel string) > R

HBase 实战(1)--HBase的数据导入方式

前言: 作为Hadoop生态系统中重要的一员, HBase作为分布式列式存储, 在线实时处理的特性, 备受瞩目, 将来能在很多应用场景, 取代传统关系型数据库的江湖地位. 本篇博文重点讲解HBase的数据导入, 描述三种方式, Client API, Bulkload, 以及Hive Over HBase. *). Client API实现借助HBase的Client API来导入, 是最简易学的方式. Configuration config = HBaseConfiguration.crea