命名路由

命名路由是什么(就是给路由配置一个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,
      }
    }
  ]
})

通俗的讲，上边的代码就是：

1. 路径‘ / ’渲染三个视图（匿名视图router-view 默认是default里边渲染Foo组件，名字是a的router-view渲染Bar组件，名字是b的router-view渲染的是Baz组件）
2. 路径' /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/