使用二级路由 会显示父路由下面的子路由  且父子路由同时显示

因为父子同时显示  路由地址在同一级别/

路由的显示模式有两种(都是为了减少数据库后台请求次数)

#hash模式(#是特殊字符,很多场合不满足,微信支付,分享url作为参数传递时候不行)

地址栏不改变,不会发送请求。#后面后台不获取

history模式(问题:刷新问题,页面不存在会出现404。 hash页面不存在会没反应)

需要后台配合,处理404问题

mode:‘history’
routes:【】

vue-router 二级路由(父子路由)的更多相关文章

  1. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  2. vue新建项目之标准路由配置--父子嵌套界面

    配置路由所有用到的地方总共四步或者说四处 1.index.js(src--router--index.js) 父子界面嵌套---需要配置子路由 import Vue from 'vue' import ...

  3. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  4. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  5. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  6. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  7. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  8. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  9. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  10. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

随机推荐

  1. Spring注解@ConfigurationPropertie

    @ConfigurationPropertie作用 参考的博客 springboot中@ConfigurationProperties注解的工作原理 @ConfigurationProperties是 ...

  2. 谁说5G网络无敌?第六代Wi-Fi表示不服

    导读 随着第五代移动通信技术(5G)正式商用,同属第五代的Wi-Fi技术(802.11ac)的处境就非常尴尬了,除了不存流量费用外,无论是网速.设备连接数还是网络延迟,5G都拥有秒杀802.11ac的 ...

  3. HTML有2种路径的写法:绝对路径和相对路径

    HTML有2种路径的写法:绝对路径和相对路径 2016年11月30日 17:51:20 Bolon0708 阅读数 21775   版权声明:本文为博主原创文章,未经博主允许不得转载. https:/ ...

  4. CSP-S2019 爆炸记

    DAY -1 停课的第五天.早上来机房教练居然不在,先看了一道憨题,发现ST表+二分查找nlogn水过,然后发现单调栈可以O(n),肥肠开心 打了走人. 然后就开始颓了(逃 颓了一会之后看愤怒的小鸟这 ...

  5. hibernate中简单的增删改查

    项目的整体结构如下 1.配置文件 hibernate.cfg.xml <!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hi ...

  6. bootstrap选项卡页面中如何关闭当前选项卡及页面

    再具体说一下现在的需求: 如上界面:在新闻发布界面有一个按钮,在点击按钮的时候我需要直接把这个打开的选项卡关闭 实现思路: 1)关闭选项卡对应的页面     2)去除上方选项卡      3)激活前一 ...

  7. CH11 关联容器

    关联容器与顺序容器有着根本的不同:关联容器中的元素是按关键字来保存和访问的,而顺序容器是按它们在容器中的位置来顺序保存和访问的.两个主要的关联容器:map和set map 中的元素的是一个key-va ...

  8. jumpserver手动配置文档

    1.环境  centos7.6   硬盘 200G  cpu  8核心  内存 32G (本地测试的时候,有报错,原因为虚拟机配置不够,此时为在pve虚拟化上面做的linux系统) 2.https:/ ...

  9. jdk环境

    安装方式一  jdk环境 干净的环境 将tar包解压到 /usr/local下 版本为jdk-8u211-linux-x64.tar.gz  路径为/usr/local/jdk1.8.0_211 /u ...

  10. Vue的7属性-8方法-7指令

    Vue的7属性: el属性 绑定id,用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符 data属性 用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在dat ...