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 ...
随机推荐
- python3 判断大小写
转自http://wangwei007.blog.51cto.com/68019/1134323 # 一.pyhton字符串的大小写转换, 常用的有以下几种方法: # 1.对字符串中所有字符(仅对字母 ...
- 电商架构设计-通过系统和业务拆分,遵循单一职责原则SRP,保障整个系统的可用性和稳定性
个人观察 1.通过系统和业务拆分,遵循单一职责原则SRP,保障整个系统的可用性和稳定性. 2.单一职责原则SRP,真的很关键,广大程序员需要不断深入理解这个原则. 3.架构图是架构师的重要输出,通过图 ...
- 阿里云服务器Ubuntu 16.04 3安装mysql
.更新系统 apt-get update [注意:要在root用户下] .安装mysql-server apt-get install mysql-serverapt-get install mysq ...
- @requestbody---接受前端传json对象并绑定javabean
@requestbody---接受前端传json对象并绑定javabean----https://blog.csdn.net/ljxbbss/article/details/74452326 最近代码 ...
- noip模拟赛 列车调度
[ 问题描述 ] 有N辆列车,标记为1,2,3,…,N.它们按照一定的次序进站,站台共有K个轨道,轨道遵从 先进先出的原则.列车进入站台内的轨道后可以等待任意时间后出站,且所有列车不可后退.现在要使出 ...
- 我不喜欢的 Rust 特性 (之一) eager drop
struct Foo; impl Drop for Foo { fn drop(&mut self) { println!("drop"); } } fn main() { ...
- SpringMvc切面校验JavaBean及基础类型
先配置好aop需要的配置,文:https://www.cnblogs.com/jiangxishicheng/p/10896498.html 编写校验切面类: package com.aspect;/ ...
- Linux服务管理(Ubuntu服务管理工具sysv-rc-conf)(转)
Linux运行级别 Linux系统任何时候都运行在一个指定的运行级上,并且不同的运行级的程序和服务都不同,所要完成的工作和要达到的目的都不同,系统可以在这些运行级之间进行切换,以完成不同的工作. 运行 ...
- Weblogic补丁升级操作手冊
1.查看Weblogic版本号 方法一 [weblogic@Weblogic201 ~]$ cd /home/weblogic/Oracle/Middleware/wlserver_10.3/serv ...
- Linux内核之于红黑树and AVL树
为什么Linux早先使用AVL树而后来倾向于红黑树? 实际上这是由红黑树的有用主义特质导致的结果,本短文依旧是形而上的观点.红黑树能够直接由2-3树导出.我们能够不再提红黑树,而仅仅提2- ...