命名路由
命名路由是什么(就是给路由配置一个name)
在创建router实例的时候，在routes配置中给某个路由设置name
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',//这个name就是当前路由的名称
component: User
}
]
})
命名路由干什么用
当路径比较多比较复杂的时候，使用命名路由，代替路径实现路由跳转是一个很好的体验
命名路由怎么用
获取这个路由的
//不使用name获取路由
<router-link :to="/name/123">User</router-link>
//使用路由name获取路由
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
//编程式导航跳转 使用router name
this.$router.push({ name: 'user', params: { userId: 123 }})
命名视图
命名路由是什么(就是给router-view 配置一个name)
- router-link的视图展示在router-view中，但是有时候想同时展示多个视图，而不是都嵌套在一个router-view中，那么使用命名视图可以让页面中存在多个单独命名的视图出口
- router-view没有设置名字，那么默认为default
//在一个组件中 同时存在多个router
<router-view></router-view>
<router-view name='a'></router-view>
<router-view name='b'></router-view>
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}, {
path: '/other',
components: {
default: Foo,
a: Bar,
}
}
]
})
通俗的讲，上边的代码就是：
- 路径‘ / ’渲染三个视图（匿名视图router-view 默认是default里边渲染Foo组件，名字是a的router-view渲染Bar组件，名字是b的router-view渲染的是Baz组件）
- 路径' /other '渲染两个视图 （匿名视图router-view 默认是default里边渲染Foo组件，名字是a的router-view渲染Bar组）
不使用命名视图的情况处理以上问题：需要用 编写包括 Foo Bar Baz 组件的新组建为‘ / ’要渲染组件 和 编写包括 Foo Bar 组件的新组建为‘ /other ’要渲染组件，这样就只需一个router-view就够了
嵌套命名视图
对于比较复杂的页面结构，可能需要嵌套路由来处理（用嵌套组件也可以实现相同效果）
/settings/emails /settings/profile
+-----------------------------------+ +------------------------------+
| UserSettingsTit | | UserSettingsTit |
| +-----+-------------------------+ | | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | |
| | +-------------------------+ | | | +--------------------+ |
| | | | | | | | UserProfilePreview | |
| +-----+-------------------------+ | | +-----+--------------------+ |
+-----------------------------------+ +------------------------------+
以上是两个路由对应的不同的页面结构
分析这两个页面的结构
都存在UserSettingsTit和Nav 组件
区别的组件有UserEmailsSubscriptions 和另一个路由下的UserProfile， UserProfilePreview
相同的路由对应相同的组件，不同的路由对应不同的路由
//代码实现UserSettings组件结构
<!-- UserSettings.vue -->
<div>
<UserSettingsTit>
<NavBar/>
<router-view/>
<router-view name="helper"/>
</div>
//代码实现路由
let routes=[
{
path：'settings',
component:userSetting,
children:[{
path:'emails',
//components:[
//default:UserEmailsSubscriptions,
//]
conponent:UserEmailsSubscriptions
},{
path:'profile',
components:[
default: UserProfile,
helper: UserProfilePreview
]
}]
}
]
//以上代码执行，会调用组件的钩子函数 ---代码地址：https://jsfiddle.net/22wgksa3/10232/
