vue-router路由加载两种模式

时间:2022-09-02 15:42:56

路由安装
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路由加载两种模式的更多相关文章

  1. vue路由的两种模式配置以及history模式下面后端如何配置

    vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...

  2. angularJS 路由加载js controller 未定义 解决方案

    说明 本文主要说明,在angularJS框架使用中,angularJS 路由加载js controller 未定义 解决方案. 路由 $routeProvider 异步加载js 路由的基本用法,请查看 ...

  3. Angular07 路由的工作流程、路由参数、子路由、利用路由加载模块、模块懒加载???

    1 Angular路由的工作流程 用户在浏览器输入一个URL -> Angular将获取到这个URL并将其解析成一个UrlTree实例 -> Angular会到路由配置中去寻找并激活与Ur ...

  4. Windows2003 IIS6.0支持32位和64位两种模式的设置方法

    IIS 6.0 可支持 32 位和 64 位两种模式.但是,IIS 6.0 不支持在 64 位版本的 Windows 上同时运行这两种模式.ASP.NET 1.1 只在 32 位模式下运行.而 ASP ...

  5. 【转】Reactor与Proactor两种模式区别

    转自:http://www.cnblogs.com/cbscan/articles/2107494.html 两种IO多路复用方案:Reactor and Proactor 一般情况下,I/O 复用机 ...

  6. ACE_linux:Reactor与Proactor两种模式的区别

    一.概念: Reactor与Proactor两种模式的区别.这里我们只关注read操作,因为write操作也是差不多的.下面是Reactor的做法: 某个事件处理器宣称它对某个socket上的读事件很 ...

  7. JSP中两种模式的总结

    运用JSP/Servlet实现的Web动态交互,主要采用: 模式一:JSP+JavaBean 链接:http://wxmimperio.coding.io/?p=155 模式二;JSP+Servlet ...

  8. ListView加载两种以上不同的布局

    不同的项目布局(item layout) Listview一种单一的item 布局有时候不能完全满足业务需求,我们需要加载两种或两种以上不同的布局,实现方法很简单: 重写 getViewTypeCou ...

  9. Doctype 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

    Doctype:(Document Type)文档类型,它位于文档中最前面的位置,处于标签之前.如果你想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE的声明.确定了正确的Doctyp ...

随机推荐

  1. 使用ActionBar Tab

    使用ActionBar Tab(地址) 本文实现将页面分为多个选项卡,并在每一个选项卡中显示一个ListView. 创建新Layout - ActionbarTab.axml, 并向页面中添加Fram ...

  2. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  3. yield return in C#

    Yield has two great uses It helps to provide custom iteration with out creating temp collections. It ...

  4. ubuntu下安装java和eclipse

    java安装 1 下载jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 2 ...

  5. 【BZOJ 1579】 1579: [Usaco2009 Feb]Revamping Trails 道路升级 (最短路)

    1579: [Usaco2009 Feb]Revamping Trails 道路升级 Description 每天,农夫John需要经过一些道路去检查牛棚N里面的牛. 农场上有M(1<=M&lt ...

  6. java 日常学习记录-反射

    Hero类 package helloworld; public class Hero { public String name; //姓名 public float hp; //血量 public ...

  7. 白话TCP为什么需要进行三次握手

    阅读本文大概需要 2.3 分钟. 作者:雨林 https://www.cnblogs.com/yuilin 首先简单介绍一下TCP三次握手 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次 ...

  8. Maven Speed Up

    收录架构 proxy代理仓库 不支持仓库搜索功能 收录版本 所有版本 更新时间 每24小时更新一次 使用说明 一.在maven软件中使用 以Maven 3.5.2为例: 打开maven配置文件 ./a ...

  9. Python学习笔记之爬取网页保存到本地文件

     爬虫的操作步骤: 爬虫三步走 爬虫第一步:使用requests获得数据: (request库需要提前安装,通过pip方式,参考之前的博文) 1.导入requests 2.使用requests.get ...

  10. MIME类型释义--MIME类型大全--web&period;xml中有关&lt&semi;mime-mapping&gt&semi;配置说明

    最早的HTTP协议中,并没有附加的数据类型信息,所有传送的数据都被客户程序解释为超文本标记语言HTML 文档,而为了支持多媒体数据类型,HTTP协议中就使用了附加在文档之前的MIME数据类型信息来标识 ...