vue,一路走来(2)--路由vue-router
安装 Mint UI
cnpm install mint-ui --save
如果你的项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中:
自己觉得mint-ui的文件介绍不是很详细,简单介绍一下我遇到的问题吧!
1.Swipe 轮播图:记得一定要给个高度
<!--轮播图-->
<div class="page-swipe">
<mt-swipe :auto="" :show-indicators="true">
<mt-swipe-item :class="{slide1:true}"></mt-swipe-item>
<mt-swipe-item :class="{slide2:true}"></mt-swipe-item>
<mt-swipe-item :class="{slide3:true}"></mt-swipe-item>
</mt-swipe>
</div>
.page-swipe .mint-swipe{
height:100px;
color:#fff;
font-size:30px;
text-align:center;
}
.page-swipe .mint-swipe-item{
line-height:100px;
}
底部导航切换问题
我制做成了字体图标(制作地址:https://icomoon.io/),这是一个公用组件,点击切换类,让我头疼的是,首页按钮图标默认是选中的类,这样就造成页面一刷新,还原默认选中现状,这是不合理的。
想来想去,他们都有各自的index值,最后加了一个本地存储index
修改20170830,底部导航最后换了一种更加简洁的方法,如下图
在路由js文件里配置selected
在tabbar文件中
路由切换,vue-router
cnpm install vue-router --save
<router-link to="/Index"></router-link>
在main.js里
import router from './router/router.config.js'
new Vue({
el:'#app',
router,
rects,
store:store,
template:'<App/>',
components:{App}
})
在router.config.js里
想强调一下的是红色框内的,在路由切换时遇到上一页滑动到页面一半,同时切换到下一个路由,下一个页面也停留在中间,看到的并不是页面的顶部内容,这也是不合理的,原因是路由默认是hash模式(自己百度他们两者的区别)。
接下来就涉及带参数的路由了
1、显示在url中
params传值是通过 :[参数值] 如path: "/ListContent/:id"
<router-link :to="{ name: 'ListContent', params: { id: list.id }}"></router-link>
如:http://hd.com/ListContent/79
通过 this.$route.params.参数名来接受传递过来的值
20171212补充:
params、query是什么?
params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params
query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。
router.js:
路由设置这里,当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。
注意:如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,那依赖这个参数的http请求或者其他操作就会失败。
<router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}" >
router-link跳转router1
</router-link>
1、params是路由的一部分,必须要有。query是拼接在url后面的参数,没有也没关系。
2、params、query不设置也可以传参,params不设置的时候,刷新页面或者返回参数会丢失。
vue,一路走来(2)--路由vue-router的更多相关文章
- vue,一路走来(1)--构建vue项目
2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...
- vue,一路走来(13)--vue微信分享
vue微信分享 今天记录一下vue微信分享. 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.这个不多说,见文档,只有绑定了才能进行下一步的动作 2.需要引入js文件 ...
- vue,一路走来(7)--响应路由参数的变化
今天描述的问题估计会有很多人也遇到过. vue-router多个路由地址绑定一个组件造成created不执行 也就是文档描述的,如下图 我的解决方案: created () { console.log ...
- vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式
最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...
- vue,一路走来(16)--本地及手机调试
闲暇时间记录一下如何绑定域名,实现本地及手机调试的过程.我的是微信开发项目,很多功能及操作都是基于微信来开发的,理所当然的就用到微信开发者工具了. 1.首先打开目录C:\Windows\System3 ...
- vue,一路走来(12)--父与子之间传参
今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionno ...
- vue,一路走来(11)--HTML5 History模式
HTML5 History模式 项目中我用的是history模式. 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不 ...
- vue,一路走来(6)--微信支付
微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 分享一下vue实现微信支付.在微信浏览器里面 ...
- vue,一路走来(5)--微信登录
微信登录 今天又是周末了,想着博客还没记录完成.是的,下面记录一下微信登录遇到的问题. 在我的项目中,个人中心是需要完成授权登录才可以访问的,首先在定义路由的时候就需要多添加一个自定义字段requir ...
随机推荐
- CSS--使用CSS Grid(网格)布局
.一 CSS Grid(网格布局)简介 CSS Grid 布局由两个核心组成部分是父元素和子元素,父元素 是实际的 grid(网格),子元素是 grid(网格) 内的内容.下面是一个父元素和六个子元素 ...
- 英语单词omitting
omitting 来源——报错 [root@centos7 ~]# cp /etc/ /bin cp: omitting directory ‘/etc/’ [root@centos7 ~]# cp ...
- Feign调用远程服务报错:Caused by: java.lang.IllegalStateException: Method getMemberInfo not annotated with HTTP method type (ex. GET, POST)
org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'ord ...
- Jenkins镜像
https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json
- 【大量干货】史上最完整的Tengine HTTPS原理解析、实践与调试
本文邀请阿里云CDN HTTPS技术专家金九,分享Tengine的一些HTTPS实践经验.内容主要有四个方面:HTTPS趋势.HTTPS基础.HTTPS实践.HTTPS调试. 一.HTTPS趋势 这一 ...
- AutoLayout面试题记录-自动布局
1. 面试上海某家软件公司,题目是这样,有一个View,距左右父View长度一定,高度一定.这个View上面有4个小View,高度相同(或者说一定), 要求不管屏幕怎么变,这4个小View总是等宽平分 ...
- 如何安装 mcrypt
#cd libmcrypt-2.5.8 #./configure #make #make install 说明:libmcript默认安装在/usr/local3.安装mhash #tar -zxvf ...
- POJ 2391--Ombrophobic Bovines(最大流(拆点)+二分+最短路)
Ombrophobic Bovines Description FJ's cows really hate getting wet so much that the mere thought of g ...
- SYSTEM32 下的几乎所有文件的简单说明(原由无忧启动论坛老毛桃出)
SYSTEM32 下的几乎所有文件的简单说明(原由无忧启动论坛http://bbs.wuyou.com老毛桃出): clui.dll .....Security Descriptor Editor,没 ...
- spring mvc中的@Entity是什么意思?
@Entitypublic Class JavaBean{}标注该类为实体类.