export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }, {
      path: '/text',
      name: 'text',
      component: text
    }, {
      path: '/text/:id',
      component: param
    }
  ]
})

第一種用法：

通過name屬性，為一個頁面中不同的router-view渲染不同的組件,如：將上面代碼的Hello渲染在 name為Hello的router-view中，將text渲染在name為text的router-view中。不設置name的將為默認的渲染組件。

<template>
  <div id="app">
     <router-view></router-view>
     <router-view  name="Hello"></router-view> //將渲染Hello組件
     <router-view  name="text"></router-view>   //將渲染text組件
  </div>
</template>

第二種用法：

可以用name傳參 使用$router.name獲取組件name值

 <template>
  <div id="app">
    <p>{{ $route.name }}</p> //可以獲取到渲染進來的組件的name值
    <router-view></router-view>
  </div>
</template>

第三種用法：

用于pramas傳參的引入 pramas必須用name來引入 query可以用name或者path來引入（不明白vue-router傳參的可以參考我的另一篇文章vue-router中 query傳參和params傳參的區(qū)別和注意事項）

   var router = new VueRouter({
      routes: [
        { name:'register', path: '/register/:id/:name', component: register }
      ]
    })
   <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注冊</router-link>

轉載自：https://blog.csdn.net/alokka/article/details/84318734