浅析vue-router中name的用法

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

1. 第一种用法：

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

1. 第二种用法：

<template>
  <div id="app">
    <p>{{ $route.name }}</p> //可以获取到渲染进来的组件的name值
    <router-view></router-view>
  </div>
</template>

3.第三种用法：

<template>
  <div id="app">
    //向name为hello的组件传参数id，值为12
    <router-link ：to="{name:'hello', params:{id: '12'}}">hello</router-link>
    <router-view></router-view>
  </div>
</template>