Vue-router基本使用

Vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

官方文档传送门：https://router.vuejs.org/zh-cn/

路由概念

参考文章：https://www.cnblogs.com/SamWeb/p/6610733.html

路由，其实就是指向的意思。路由中有三个基本的概念 route, routes, router。

1. route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。
2. routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]
3. router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
4. 客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

vue-router中的路由也是基于上面的内容来实现的

路由传参

首先，定义一个路由

//命名路由&路由传参
{ name: 'order', path: '/order', component: OrderDetail }

1. params

router-link实现

<router-link :to="{ path: '/order', params: { orderId: '15236' }}">订单详情</router-link>

script实现
- 方式一
重新定义路由，添加参数

//命名路由&路由传参
{ name: 'order', path: '/order/:orderId', component: OrderDetail }

传递参数

this.$router.push({ path: '/order/15236'})

• 方式二

this.$router.push({name: "order", params:{orderId: id}});

获取传递过来的参数：

created() {
    if (this.$route) {
        this.orderId = this.$route.params.orderId;
    } 
    this.initData();
},

1. query

router-link实现

<router-link :to="{ path: '/order', query: { orderId: '15236' }}" replace>订单详情</router-link>

script实现

this.$router.replace({ path: '/order', query: { orderId: '15236' }})

获取传递过来的参数

created() {
    if (this.$route) {
        this.orderId = this.$route.query.orderId;
    } 
    this.initData();
},

参考文章：http://blog.csdn.net/lucky_lxg/article/details/70598281#t6