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>
