vue-router

vue路由带参跳转，跳转后页面拿参一直有些混淆，今天用半小时屡清楚记录一下。

tip: >.< 啊！我终于分清了$router和$route

const router = new VueRouter({
routes//(缩写，相当于 routes:routes)
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')

通过注入路由器，我们可以在任何组件内通过this.$router访问路由器，通过this.$route访问当前路由

//当前路由
this.$route.params.username
//路由器
this.$router.go(-1);
this.$router.push('/');

this.$router和router使用起来完全一样，我们使用this.$router是因为我们不想在每个独立封装的路由组件中都导入路由。

动态路由匹配

假设场景，不同userid的用户要跳转到同一个页面

{
    path:'/mgcenter/order/detail/:id',
    name:'orderDetail',
    component: OrderDetail
  }

这样使用冒号：标记的路径，当匹配到一个路由时，冒号参数会被设置到this.$route.params,可以在每个组件内使用：

const User = {
  template:'<div>User{{$route.params.id}}</div>'
}

设置多段路径参数：

/user/:username/post/:post_id
/user/evan/post/123
{ username: 'evan', post_id: 123 }

vue中跳转形态分为两种：

下面例子按顺序对应

声明式

html中使用，router-link创建a标签来定义导航链接

[0]<router-link :to='...'>

[1]<router-link :to='mgcenter'></router-link>

[2]<router-link :to="{name:'InvoiceApplication',params:{id:id}}">
[2]<router-link :to="{name:'InvoiceApplication',params:{id}}">
//这两句一样的，我试了。
//route.js
{
    path:'/mgcenter/order/invoice_application/:id',
    name:'InvoiceApplication',
    component: InvoiceApplication
  }
//url
http://www.58qf.com/mgcenter/order/invoice_application/1231321321131321

[3]<router-link :to="{path:'/mgcenter/order/invoice_application',query:{orderId:id}}">
//route.js
{
    path:'/mgcenter/order/invoice_application',
    name:'InvoiceApplication',
    component: InvoiceApplication
  }
//url
http://www.58qf.com/mgcenter/order/invoice_application?orderId=1231321321131321
这是传参时不给起名的情况，url里就用参数的默认名字了
<router-link :to="{path:'/mgcenter/order/invoice_application',query:{id}}">
//url
http://www.58qf.com/mgcenter/order/invoice_application?id=1231321321131321

[4]<router-link :to="'/mgcenter/order/invoice_application/'+id">
//route.js
{
    path:'/mgcenter/order/invoice_application/:id',
    name:'InvoiceApplication',
    component: InvoiceApplication
  }
//url
http://www.58qf.com/mgcenter/order/invoice_application/1231321321131321

编程式

router的方式，

[0]router.push(...)

[1]router.push('mgcenter')

[2]router.push({name:'orderDetail',params:{id:this.orderDetail.id}})

[3]router.push({path:'/mgcenter/order/detail',query:{id:this.orderDetail.id})

[4]router.push({path:'/order_detail/${this.order.id}'})

tips:
如果提供了path,就不要写params
name 和 params一组，参数通过斜杠/拼接在url后面
path 和 query 一组 ，参数通过问号？拼接在url后面