在專案中需要路由傳參，查看了官方文件以及參考了網上其他資料，現總結如下：
一/ params傳參

1. 佔位符:id

//宣告式
<router-link :to=`/home/${name}`>  
//程式設計式
skipMethod (name) {
    this.$router.push(`/home/${name}`);
    //或者
    this.$router.push({
       path: `/home/${name}`
    })
}

路由配置：

{
   path; '/home/:id',
   name: 'home',
   component: Home
}
 

子元件中獲取：

this.$route.params.name;  //注意是$route

根據官方文件的說明，我覺得:id 的作用主要是利用props將元件和路由解耦，我通俗的說一下：一個元件可能是一個路由指向它，也有可能只是作為普通的子元件（不是路由），如果使用該元件都要向其傳遞name引數，如果用this.$route.params.name;接收引數，那麼作為普通的子元件怎麼接收引數，所以最好不管怎麼用該元件，該元件都要用props接收引數，下面主要說路由如何用props

路由配置：

routes: [
    { path: '/', component: Hello }, // No props, no nothing
    { path: '/hello/:name', component: Hello, props: true }, // Pass route.params to props
    { path: '/static', component: Hello, props: { name: 'world' }}, // static values
    { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn }, // custom logic for mapping between route and props
  ]
 

父元件：

<ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/hello/you">/hello/you</router-link></li>
        <li><router-link to="/static">/static</router-link></li>
        <li><router-link to="/dynamic/1">/dynamic/1</router-link></li>
        <li><router-link to="/attrs">/attrs</router-link></li>
      </ul>
 

子元件：

export default {
   props: {
      ..........
   }
}

2. params物件

//宣告式
<router-link :to="{name: 'home', params:{name: name}}">  
//程式設計式
skipMethod (name) {
    this.$router.push({
       name: 'home',
       params: {
          name: name
       }
    })
}

路由配置：

{
   path; '/home',
   name: 'home',
   component: Home
}

接收：

this.$route.params.name;

注意：params只能用name來引入路由

二/ query傳參

//宣告式
<router-link :to="'/home?name=' + name">
//或者
<router-link :to="{path: '/home', query: {name: name}}">
//程式設計式
skipMethod (name) {
    this.$router.push({
       path: '/home',
       query: {
          name: name
       }
    })
}

路由配置：

{
   path; '/home',
   name: 'home',
   component: Home
}

子元件接收：

this.$route.query.name