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连接mysql 稍微进阶 + 日期处理
1.踩了个操作中文的坑,结果发现之前的文章中有强调了,在连接处加:charset="utf8" conn = pymysql.connect(host = '127.0.0.1', ...
- Python习题之列表排序,4种方法
def sort_list_method_1(a): return sorted(a) print(sort_list_method_1([1, 4, 2])) def sort_list_metho ...
- 全面了解cookie和session
http协议: http即超文本传输协议(万维网定义的),一种基于浏览器请求与服务器响应的链接,它是一个很纯粹的传输协议.http协议主要的特征就是它是一种无状态的协议(只针对cookie与sessi ...
- Python-函数和代码复用
函数的定义与使用 >函数的理解与定义 函数是一段代码的表示 -函数是一段具有特定功能的.可重用的语句组 -函数是一种功能的抽象,一般函数表达特定功能 -两个作用:降低编程难度 和 代码复用 de ...
- 百练4152:最佳加法表达式(dp+高精度)
描述 给定n个1到9的数字,要求在数字之间摆放m个加号(加号两边必须有数字),使得所得到的加法表达式的值最小,并输出该值.例如,在1234中摆放1个加号,最好的摆法就是12+34,和为36 输入有不超 ...
- Mongodb慢查询笔记 (Mongodb slow query log)
-- =========================== -- mongodb slow query log -- =========================== Reference: h ...
- js cookies all in one
js cookies all in one cookies // http://10.1.5.202/auto-deploy-platform/publish/index.html // 非当前 UR ...
- Luogu P1257 平面上的最接近点对 暴力
这道题数据不大 两点距离用勾股定理求 #include<iostream> #include<cmath> using namespace std; struct node{ ...
- 使用C#执行PowerShell命令
按照网上的教程配置会发生SSL链接错误 该文章的最后使用了SSL来保证账户在连接服务器的时候不发生账户认证错误,但是我经过测试发现这个是不可行的,有一种更为简单的方法 首先要对服务器进行winrm设置 ...
- SystemTapでMySQL 5.5のDisk I/Oを分析する
http://d.hatena.ne.jp/sh2/20111121 2010年1月の記事SystemTapでMySQLのDisk I/Oを分析するの続きです.以前作成したSystemTapスクリプト ...