之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是处理一下 原因addRoutes 方法仅仅是帮你注入新的路由,并没有帮你剔除原有的其它路由! 我们先看一下原来代码 路由拦截器中的代码: permission.js: if (roles) { function asyncFun(){ return new Promise(function(reso…

原因:定义重复的路由名称. 我有3个不同的(父级)vue文件分别配置了3个相同的(子级)vue文件,配置路由的js文件里子集路由的name重复了. 解决方案: 一天一个小Bug…

Vue路由Hash模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,即使用URL的Hash来模拟一个完整的URL,当URL改变时页面不会重新加载. 描述 Hash符号即#原本的目的是用来指示URL中指示网页中的位置,例如https://www.example.com/index.html#print即代表example的index.html的print位置,浏览器读取这个URL后,会自动将print位置滚动至可视区域,通常使用<…

Vue路由History模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,通过引入Vue-router对象模块时配置mode属性可以启用history模式. 描述 Vue-router的hash模式使用URL的Hash来模拟一个完整的URL,当URL改变时页面不会重新加载,而Vue-router的history模式是充分利用history.pushState的API来完成URL跳转,同样在页面跳转时无须重新加载页面,当然也不会对…

初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路由使用超链接 以下内容来自官网,js使用ES6 如何在vue项目中使用vue-router HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="htt…

上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js的组件,组件其实就是页面组成的一部分,它是一个具有独立的逻辑和功能或页面,组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树,如下图: 接下来我们就仔细讲讲组件的使用吧. 1 全局组件 以下就是我们注册…

vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', redirect: '/main', },{ path: '/main', name: 'Main', component: ()=> import('@/views/Main'), children: [ { //path: '/testPage', //这种方式 不配置参数名, 页面刷新会丢失…

前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过URL进行组件之间的切换.本文将详细介绍Vue路由vue-router 安装 在使用vue-router之前,首先需要安装该插件 npm install vue-router 如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能 import Vue from 'vue'…

先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <div id="aside"> <ul> <!--这里是锚链接--> <li> <router-link to='/fn1'>111</router-link> </li> <li> <router…

vue-router 现在的应用都流行SPA应用(single page application) 传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候受网络.性能影响,浏览器会出现不定时间的空白界面,用户体验不好 单页面应用就是用户通过某些操作更改地址栏url之后,动态的进行不同模板内容的无刷新切换,用户体验好. Vue中会使用官方提供的vue-router插件来使用单页面,原理就是通过检测地址栏变化后将对应的路由组件进行切换(卸载和安装) 简单路由实…