vue路由
一、vue关于路由的5个重要对象
1、router-view：类似angular中的router-outlet，router-view会不断的改变成要展示的组件；
2、router-link：直接使用该标签进行标签导航，会被渲染成a标签；
3、routes： 数组，在该数组中配置所有的路由；
4、router：通过router，进行方法导航,方法有push(),replace()(不会有历史记录),go()(有历史记录才可以使用)；
5、route： 类似angular中的activatedRoute，获取传过来的参数。
二、路由传参
路由传参有2种方式：router-link导航传参与方法导航传参
1、router-link导航传参有2种方式：
A、通过query传参，header组件向product组件传参，举例如下：
header.vue
<router-link :to="{name:'product',query:{productName:'苹果手机'}}">展示商品方法一：query传参</router-link>
product.vue
<p class="showProduct">商品名称(接收header组件的query传值)：{{getProductNameByQuery}}</p> computed: { // 计算属性 getProductNameByQuery(){ console.log(this.$route); return this.$route.query.productName; } }B、通过params传参，header组件向product组件传参，举例如下：
header.vue
<router-link :to="{name:'product',params:{productName:'华为手机',price:'1999元'}}">展示商品方法二：params传参</router-link>product.vue
<p class="showProduct">商品名称(接收header组件的params传值)：{{getProductNameByParams}}</p> computed: { getProductNameByParams(){ console.log('$route对象为：',this.$route); return this.$route.params.productName; } }注意：路由重命名，可以结合params传参；使用params传参时，一定要动态配置路由。下面代码中的“:/”就是为了配置动态路由。
// routes：数组，在该数组中配置所有的路由； const routes = [ {path:'/home',component:myHome,name:'home'}, // 注意：路由重命名，可以结合params传参；使用params传参时，一定要动态配置路由 {path:'/product/:productName/:price',component:myProduct,name:'product'} ];2、方法导航传参
header.vue
<button @click="showProduct">展示商品方法三：方法导航</button> methods: { showProduct(){ console.log(this.$router); this.$router.push({name: 'product', params: {productName: '金立手机'}}); } }3、监听路由变化
watch: { $route: function (newValue, oldValue) { console.log(newValue, oldValue); } }
三、路由重定向/通配符路由
// routes：数组，在该数组中配置所有的路由； const routes = [ // 路由重定向 {path: '/', redirect: '/home'}, {path: '/home', component: myHome, name: 'home'}, // 注意：路由重命名，可以结合params传参；使用params传参时，一定要动态配置路由 {path: '/product/:productName/:price', component: myProduct, name: 'product'}, // 通配符路由 {path: '*', component: myHome} ];
四、jquery与swiper的引入与使用
提示：在vue中建议使用vue封装好的插件，而非此种引入的方式。
vue中引入swiper方法
npm install jquery --save npm install swiper --save 在使用时，需要首先引入，具体做法： import * as $ from 'jquery' import * as Swiper from 'swiper'注意：因为swiper是基于jQuery的，所有首先引入jquery。另外，样式书写时，必须把swiper的样式，引入到最上面。
/*引入css样式,必须在最上面*/ @import '../../../node_modules/swiper/dist/css/swiper.css';html页面
<!--推荐使用vue的swiper插件--> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="http://www.placehold.it/300x300" alt="图片加载失败"><img src="http://www.placehold.it/300x300" alt="图片加载失败"><img src="http://www.placehold.it/300x300" alt="图片加载失败"> </div> <div class="swiper-slide"><img src="http://www.placehold.it/300x300" alt="图片加载失败"><img src="http://www.placehold.it/300x300" alt="图片加载失败"><img src="http://www.placehold.it/300x300" alt="图片加载失败"> </div> <div class="swiper-slide"><img src="http://www.placehold.it/300x300" alt="图片加载失败"><img src="http://www.placehold.it/300x300" alt="图片加载失败"><img src="http://www.placehold.it/300x300" alt="图片加载失败"> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div>js页面初始化
// 实例创建完成并且页面显示的钩子 mounted(){ console.log('检测jQuery使用是否有问题', $('#home>h3')); console.log(Swiper); new Swiper['default']('.swiper-container', { loop: true, autoplay: true, // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }) }易错点：在写router-link标签的时候，一定要加上：to=‘{}’，不然容易出现报错，这个很烦人的。在路由配置的时候，给每个路由进行重命名，也很关键的。
五、子路由
{path:'/mine',component:myMine,children:[ // 子路由 // 子路由的path都是基于mine的，加"/"，是基于根路由的 {path:'order:/orderID',component:myOrder,name:'mine/order'}, {path:'account',component:myAccount,name:'mine/account'} ] }子路由的路径是基于父路由的，重命名的时候，可以采用父路由/子路由的格式。