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="4000" :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不设置的时候，刷新页面或者返回参数会丢失。