vue-router路由加载两种模式
路由安装
npm install --save vue-router
安装完成后,打开package.json,如果看到这个"vue-router": 版本号, 就代表安装成功了 "dependencies": { "axios": "^0.18.0", "vue": "^2.5.2", "vue-router": "^3.0.1", "vuex": "^3.0.1" },
路由加载分为两种模式
懒加载(在我们进入首屏页面的时候根据需要加载路由组件,从而优化用户体验)
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', base: '/flag2019/admin', routes: [ { path: '/', redirect: '/flag' }, { path: '/flag', component: resolve => require(['../components/flag.vue'], resolve), meta: {title: 'xxxxx'}, }, { path: '/flagAdvise', component: resolve => require(['../components/flagAdvise.vue'], resolve), meta: {title: 'xxxx'}, }, ] })
正常加载
import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/Home' import CustomerService from '@/pages/CustomerService' Vue.use(Router) export default new Router({ mode: 'history', base: '/dreforeshop/mobile', routes: [ { path: '/home', name: 'home', component: Home, meta: { keepAlive: false } }, { path: '/service', name: 'service', component: CustomerService, meta: { keepAlive: false } }, ] })
tip:加
mode: 'history',是为了去掉url中的#号
vue-router路由加载两种模式的更多相关文章
- vue路由的两种模式配置以及history模式下面后端如何配置
vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...
- angularJS 路由加载js controller 未定义 解决方案
说明 本文主要说明,在angularJS框架使用中,angularJS 路由加载js controller 未定义 解决方案. 路由 $routeProvider 异步加载js 路由的基本用法,请查看 ...
- vue--前端路由及vue-router两种模式
前言 路由这个概念最早在后端出现,随后前后端分离,直至当今的单页面应用,路由也在一直发生变化.本文来总结一下路由变化和vue-router中的路由模式区别相关知识点. 正文 1.什么是前端路由 (1) ...
- Angular07 路由的工作流程、路由参数、子路由、利用路由加载模块、模块懒加载???
1 Angular路由的工作流程 用户在浏览器输入一个URL -> Angular将获取到这个URL并将其解析成一个UrlTree实例 -> Angular会到路由配置中去寻找并激活与Ur ...
- Windows2003 IIS6.0支持32位和64位两种模式的设置方法
IIS 6.0 可支持 32 位和 64 位两种模式.但是,IIS 6.0 不支持在 64 位版本的 Windows 上同时运行这两种模式.ASP.NET 1.1 只在 32 位模式下运行.而 ASP ...
- 【转】Reactor与Proactor两种模式区别
转自:http://www.cnblogs.com/cbscan/articles/2107494.html 两种IO多路复用方案:Reactor and Proactor 一般情况下,I/O 复用机 ...
- ACE_linux:Reactor与Proactor两种模式的区别
一.概念: Reactor与Proactor两种模式的区别.这里我们只关注read操作,因为write操作也是差不多的.下面是Reactor的做法: 某个事件处理器宣称它对某个socket上的读事件很 ...
- JSP中两种模式的总结
运用JSP/Servlet实现的Web动态交互,主要采用: 模式一:JSP+JavaBean 链接:http://wxmimperio.coding.io/?p=155 模式二;JSP+Servlet ...
- ListView加载两种以上不同的布局
不同的项目布局(item layout) Listview一种单一的item 布局有时候不能完全满足业务需求,我们需要加载两种或两种以上不同的布局,实现方法很简单: 重写 getViewTypeCou ...
随机推荐
- 51NOD 1287 加农炮(不水的线段树)
>>点击进入原题测试<< Input示例 Output示例 思路:刚开始以为结点存最大值就行了,然后大于左子树的最大值就能进入右子树:然后发现样例都过不了:后面发现,并不是这个 ...
- Codeforces Round #228 (Div. 2)
做codeforces以来题目最水的一次 A题: Fox and Number Game 题意:就是用一堆数字来回减,直到减到最小值为止,再把所有最小值加,求这个值 sol: 简单数论题目,直接求所有 ...
- 学一学书里的django是怎么写views.py的
他山之石,可以攻玉嘛. 好的习惯有时也是学别人来养成的. 外国人的编码习惯,学啊. from django.core.urlresolvers import reverse_lazy from dja ...
- Android GIS开发系列-- 入门季(3) GraphicsLayer添加点、线、面
GraphicsLayer是图形图层,可以自定义图形添加到地图上.调用GraphicsLayer的addGraphic方法就能添加图形,此方法要一个Graphic对象,此对象的构造方法是Graphic ...
- Visual Studio 中的 .NET Framework 类库
Visual Studio 中的 .NET Framework 类库 .NET Framework 类库由命名空间组成.每个命名空间都包含可在程序中使用的类型:类.结构.枚举.委托和接口. 当您在 V ...
- golang 的GOPATH设置的问题
go run footer.go 的时候呢, go会依次去GOPATH 和GOROOT设置的对应路径下面找对应的包(目录和文件) 找的时候呢, 会在GoPATH 和GOROOT对应的目录后面再加一层路 ...
- CocoaPods 的安装和使用介绍
CocoaPods 的安装和使用介绍 安装 安装方式异常简单 , Mac 下都自带 ruby,使用 ruby 的 gem 命令即可下载安装: 1 2 $ sudo gem install cocoap ...
- jstl自己定义函数的使用
因为本人之前并没有接触过jstl标签,说来也可笑,之前一直使用struts2标签.近期项目用到jstl,所以做些记录方便以后自己查看. jstl的强大原因之中的一个我觉得就是他的自己定义函数,我们能够 ...
- Codeforces Round #271 (Div. 2) D.Flowers DP
D. Flowers We saw the little game Marmot made for Mole's lunch. Now it's Marmot's dinner time and, ...
- 从基于 SQL 的 CURD 操作转移到基于语义 Web 的 CURD 操作
中文名称 CURD 含义 数据库技术中的缩写词 操作对象 一般的项目开发的各种参数 作用 用于处理数据的基本原子操作 它代表创建(Create).更新(Update).读取(Retrieve) ...