router-link

router.js:

import Vue from  vue 
import Router from  vue-router 
import HelloWorld from  @/components/HelloWorld 
import Login from  @/components/Login 

Vue.use(Router)

export default new Router({
    routes: [
    {
        path:  / ,
        name:  HelloWorld ,
        component: HelloWorld
    },
    {
        path:  /login ,
        name:  Login ,
        component: Login
    }]
})

组件中：

1. 字符串

<router-link to="login">to login</router-link>
<router-link to="/login">to login</router-link>

2. 对象

// path是router.js中的path
<router-link :to="{path: /login }"> to login</router-link>

// 命名路由  name是router.js中的name
<router-link :to="{name:  Login }"> to login</router-link>

3. 通过 query 携带参数（地址栏变成 /login?color=red）

// 通过 {{$route.query.color}} 或 this.$route.query.color 获取参数
<router-link :to="{path:  /login , query: {color:  red  }}"> to login</router-link>

// 通过 {{$route.query.color}} 或 this.$route.query.color 获取参数
<router-link :to="{name:  Login , query: {color:  red  }}"> to login</router-link>

4. 通过 params 携带参数（地址栏为/login/red）

// 无法获取参数  
// 报警告（Path "/login" was passed with params but they will be ignored. Use a named route alongside params instead.）
<router-link :to="{path:  /login , params: { color:  red  }}"> to login</router-link>

// 通过 {{$route.params.color}} 或 this.$route.params.color 获取参数。
<router-link :to="{name:  Login , params: { color:  red  }}"> to login</router-link>

---

router.push

同样的规则也适用于 router.push(...) 方法

1. 不携带参数

// 字符串
router.push( /login )

// 对象
router.push({path: /login })

// 命名路由
router.push({name:  Login })

2. 通过 query 携带参数：

// 可通过 {{$route.query.color}} 或 this.$route.query.color 获取参数
router.push({path:  /login , query: {color:  red  }})

// 可通过 {{$route.query.color}} 或 this.$route.query.color 获取参数
router.push({name:  Login , query: {color:  red  }})

3. 通过 params 携带参数：

// 无法获取参数 
router.push({path: /login , params:{ color:  red  }})

// 通过 {{$route.params.color}} 或 this.$route.params.color 获取参数。
router.push({name: Login , params:{ color:  red  }})

---

总结

1、 路由携带参数时

1. 带查询参数query时：
   无论是直接路由path 还是命名路由name，地址栏会变成/login?color=red；
2. 带路由参数params时：
   若是直接路由path 则 params 携带参数不生效，无法获取；
   若是命名路由name 则可正常获取参数，地址栏会变成/login/red；

2、设置路由map里的path值(router.js)：

1. 带查询参数 query 时，path不用改

{
   path:  /login ,
   name:  Login ,
   component: Login
}

2. 带路由参数 params 时，path应该写成:

{
   path:  /login/:color ,
   name:  Login ,
   component: Login
}

如果这里不设置path: /login/:color ，也能通过{{$route.params.color}}和this.$route.params.color接收到数据，但地址栏不会变成/login/red，而是/login

3. 路由参数非必传时（:id?）：

vue文件

<dl>
    <dt>产品及服务</dt>
    <router-link tag="dd" :to="{ name:  Serve }">平台</router-link>
    <router-link tag="dd" :to="{ name:  Serve , params: { id:  1  }}">平台1</router-link>
    <router-link tag="dd" :to="{ name:  Serve , params: { id:  2  }}">平台2</router-link>
    <router-link tag="dd" :to="{ name:  Serve , params: { id:  3  }}">平台3</router-link>
</dl>

router/index.js文件

var router = new Router({
routes: [{
    path:  /serve/:id? , //  :id? => ?问号的意思是该参数不是必传项，不传不会报错
    name:  Serve ,
    component: Serve
}]

3、获取参数方法：

1. 在组件中： {{$route.query.color}} 或 {{$route.params.color}}

2. 在 JS 中： this.$route.query.color 或 this.$route.params.color