路由安装
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. vue--前端路由及vue-router两种模式

    前言 路由这个概念最早在后端出现,随后前后端分离,直至当今的单页面应用,路由也在一直发生变化.本文来总结一下路由变化和vue-router中的路由模式区别相关知识点. 正文 1.什么是前端路由 (1) ...

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

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

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

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

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

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

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

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

  8. JSP中两种模式的总结

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

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

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

随机推荐

  1. chrome浏览器安装网页测试插件postman的图文介绍

    用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具.今天给大家介绍的这款网页调试工具不仅可以 ...

  2. Jmeter逻辑控制器-ForEach Controller

    ForEach Controller 介绍 ForEach Contoller 即循环控制器,顾名思义是定义一个规则.主要有以下一个参数: 名称:随便填写 注释:随便填写 输入变量前缀:可以在&quo ...

  3. save density, pressure, velocity, temperature contour at one slice in xy plane-- paraview with batch Python scripts

    #### import the simple module from the paraviewfrom paraview.simple import *#### disable automatic c ...

  4. CRC校验算法学习

    原文:http://www.repairfaq.org/filipg/LINK/F_crc_v31.html 本文根据上述链接原文翻译而来,如有错误,忘广大网友互相帮忙纠正,谢谢! 1.前言: 1.0 ...

  5. 【Codeforces 1073D】Berland Fair

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 我们可以从左到右枚举一轮. 定义一个cost表示这一轮花费的钱数 如果cost+a[i]<=T那么就可以买它,并且买下它(模拟题目要求) ...

  6. noip模拟赛 遭遇

    分析:暴力挺好打的,对于前30%的数据神搜,hi相同的数据将所有的建筑按照c从小到大排序,看最多能跳多少,ci=0的数据将所有的建筑按照h从小到大排序,枚举起点和终点,看能否跳这么多,取个max就可以 ...

  7. 20181010关于pt-kill自动杀死运行超长的进程

    转自: http://blog.chinaunix.net/uid-16844903-id-4442030.htmlhttp://blog.chinaunix.net/uid-31396856-id- ...

  8. - > 动规讲解基础讲解四——最大子段和问题

    给出一个整数数组a(正负数都有),如何找出一个连续子数组(可以一个都不取,那么结果为0),使得其中的和最大?   例如:-2,11,-4,13,-5,-2,和最大的子段为:11,-4,13.和为20. ...

  9. git 手动操作

    git 手动操作 以下所有的情况都需要在上面那个目录下: 查看改动: git status // 所有改动都在这里. 提交代码: git add <file_name> // 把代码放到 ...

  10. Android获取全部存储卡挂载路径

    近期因项目需求.须要在存储卡查找文件,经測试发现部分手机挂载路径查找不到,这里分享一个有效的方法. /** * 获取全部存储卡挂载路径 * @return */ public static List& ...