name属性

绑定组件

通过name属性，为一个页面中不同的router-view渲染不同的组件,如：将上面代码的Hello渲染在 name为Hello的router-view中，将text渲染在name为text的router-view中。不设置name的将为默认的渲染组件。

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

name值

可以用name传参 使用$route.name获取组件name值

    <p>{{ $route.name }}</p> //可以获取到当前路由的name值
    <router-view></router-view>

重定向

设置了重定向之后当去往的路径是path时，会重定向到redirect中的路径

     {
      path:'/goHome',
      redirect:'/'
     }

传参

name和params方法（post方法）

this.$router.push({ name: 'news', params: { userId: 123 }});
<router-link :to="{ name: 'news', params: { userId: 1111}}"></router-link>

this.$route.params.userId //接收

url上显示参数：http://localhost:8080/news

path和query方法（get方法）

this.$router.push({ path: '/news', query: { userId: 123 }});
<router-link :to="{ path: '/news', query: { userId: 123}}"></router-link>

this.$route.query.userId  //接收

url上显示参数：http://localhost:8080/news?userId=123

搭配路由名称

{
      path: '/news/:path/:id?',//?问号的意思是该参数不是必传项
      name: 'news',
      component:news,
}
//命名

<router-link :to="'/news/'+path+'/'+id">  //传送

this.$route.params.path //接收

url上显示参数：http://localhost:8080/news/path/id