我們常用vue.js和vue-router來建立單頁應用，vue-router能很方便的管理所有的單頁元件。我們在定義每個路由的時候會有一個name的屬性（如下面程式碼），通常我們不定義這個屬性發現也沒有任何問題，那麼這個name到底有什麼用呢？

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傳參的區別和注意事項）

   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>