1.形如  http://localhost:8080/#/book?id=**** ①路由配置 ②路由定向链接,以query传参id 另外,获取query传递的参数id用  this.$route.query.id 2.形如  http://localhost:8080/#/book/**** ①路由配置 ②路由定向链接,以params传参id // 当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用. // 可以通过this.$route.par

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

报错原因:多次点击同一路由,导致路由被多次添加 解决方法: router/index中添加以下代码: //router/index.js Vue.use(VueRouter) //导入vue路由 const VueRouterPush = VueRouter.prototype.push VueRouter.prototype.push = function push (to) { return VueRouterPush.call(this, to).catch(err => err) } 之

版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件 i

在项目中肯定有这样的需求,那就是在某个页面的时候,顶部展示 现在当前的页面路径,如下图: 这个在vue中其实很好实现. 首先出现这个肯定是相对应不同的页面,也就是说对应不同的路由,我们在定义路由的时候:如下 routes: [ { path: '/', name: 'login', component: login },{ path: '/Page', name: 'Page', component: Page, children: [ { path: '/', name: 'Chart', c

第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. app.vue <template> <div id=&quo

问题: 在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示, 但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片不能显示. 解决方案 1 当在给数据MyimgSrc 设置绝对路径或者是相对路径时应该使用require引入才能成功 currentSrc : require("@/assets/1.png") 解决方案 2 直接导入 <img :src="url"/> i

当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一: 在data里面定义好图片路径: /*错误写法*/ imgUrl:'../assets/logo.png' 在template模板里面:/*错误写法*/ <img src="{{imgUrl}}"> 以上是错误写法,我们应该用v-bind绑定图片的src属性: <img :src="imgUrl">或者 <img src="../assets/logo

通过脚手架vue-cli构建的项目,在项目启动后,URL地址上都会带有#,如:http://localhost:8080/#/father 原因:这是因为vue-router 默认hash模式, 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 因为对于正常的页面来说,更换url一定是会导致页面的更换的, 而只有更换url中的查询字符串和hash值得时候才不会重新加载页面 解决方法:可以使用路由的history模式!!! 这种模式充分利用了hist

本次只是记录下开发中碰到的问题. 最近做一个活动页面,涉及到角色和权限的问题,需要跳转很多页面,于是vue-router走起,顺便keep-alive也用起来了,嗯,跳转的很爽,但是一个详情页面组件,被两个路由组件引用了,此时发现有一个路由在调用详情组件时没有按需求刷新,并且已经在keep-alive上设置了exclude,调试了半天不能解决问题,就用最笨的办法,把一个相同的页面写在两处,要求算是做完了,但是,看着这样的代码,总觉得不舒服,并且有改动的话要改两处,很容易遗漏,于是,研究了一下,之

在使用UI框架提供的弹出层Popup时,如Vant UI的popup,在弹出层显示时,点击物理按键或者小程序自带的返回时,会直接退出页面,这明显不符合页面逻辑. 解决思路: 在弹出层显示时,点击了返回要退出页面前,判断弹出层是否处于显示状态,若处于显示状态,便只关闭弹出层,而不退出页面 解决方法: //页面离开前做的事情,而这个时候,路由已经发生变化,改变成了即将跳转的页面的路由 beforeRouteLeave(to, from, next){ if (this.popVisible){ //

项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../这种形式 在打包build的设置路径assetsPublicPath: ‘./‘,然后那些没有转成base64的背景图都失效了,,路径. 处理方法: 使用require引入图片 img标签 <img :src="require('assets/img/header/search.png')"> 背景图 <div :style="{background

1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-file" type="file" @change="exportData" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, applicat

平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-link tag="a" target="_blank" :to="{name:'searchGoods',params:{catId:0},query:{keywords:'手机'}}">热门好货</router-link>需要注意的

详解Vue路由钩子及应用场景(小结):https://www.jb51.net/article/127678.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wang1006008051/article/details/77962942/ VUE 爬坑之旅 -- 全局路由拦截,判断及保存登录状态:https://blog.csdn.net/zgh0711/article/details/80437000 vue路由拦截及页面跳转:https://blog

在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其底层原理和bookstrap相似 安装 npm install element-ui -S 在package.json中检查是否已经装上element 在main.js中:import ElementUI from 'element-ui' import 'element-ui/lib/theme-

1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到localStorage里面,改变vuex里的数据,便触发localStorage.setItem 方法, 实现代码: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) function storeLocalStore (state) {

一.vue中路由的使用 1.定义组件 <template> <div class="hello"> <h1 @click="info" :class="color">{{ msg }}</h1> </div> </template> <script> export default { name: 'hello', data () { return { msg: '

作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发,甚至你才刚刚加入这个项目,那么怎么样才能快速找到相关组件在整个项目代码中的文件位置呢?想必大家都有采取过以下这几种方法: [搜类名],在工程文件里搜索页面 DOM元素中的样式类名 [找路由],根据页面链接找到Vue路由匹配的页面组件 [找人],找到当初负责开发该页面的人询问对应的代码路径 以上几种

路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容. 父组件中: ? <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { // 直接调