vue 路由

前端路由的优缺点：

优点：用户体验好，不需要每次都从服务器获取，快速展现给用户
缺点：1）不利于SEO；
2）使用浏览器的前进后退键时会重新发送请求，没有合理的利用缓存
3）单页面无法记住之前滚动的位置，无法在前进后退的时候记住滚动的位置。

vue-router

vue-router用来构建SPA
<router-link></router-link>跳转相当于a标签，用to链接
或者 this.$router.push({path:""})
<router-view></router-view>组件的渲染和上边的配合使用。

动态路由匹配

/user/:username/post/:post_id
//匹配路由 ／user／feifeilian／post/123
//通过$route.params可以获取到：
{
username:'feifeilian',
post_id:'123'
}

嵌套路由

就是路由里嵌套路由
比如商品列表里通过路由查看title页面和image页面：

／goods／title
／goods／img

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置

 routes: [
    {
      path: '/goods',//动态路由配置，goodsId是动态的
      name: 'GoodList',
      component: GoodList,
      children:[
      {
        path:'title',
        name:'title',
        component: Title
      },
      {
        path:'img',
        name:'img',
        component: Image
      }
      ]
    }
  ]

但是要在上级路由下写渲染的接口， App.vue的<router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。
所以要在goods组件下写出渲染接口router-view

//goods组件
<template>
  <div>
   这是商品列表页面 
   <router-link to="/goods/title">显示商品标题</router-link>
   <router-link to="/goods/img">显示商品图片</router-link>
   <div>
     <router-view></router-view>
   </div>
  </div>
</template>

编程式路由

编程式路由不需要router-link
三种方式

$router.push("name")
$router.push({path:"name"})
$router.push({path:"name?a=123"})
跟上边一样，通过query传$router.push({path:"name",query:{a:123}})
$router.go(1)

命名式路由和命名式视图

路由：给路由定义不同的名字，根据名字进行匹配，router-link
给不同的router-view定义名字，通过名字进行对应组件的渲染

$route对象的方法

$route.path
- 类型:
  
  string
  
  字符串，对应当前路由的路径，总是解析为绝对路径，如
  
  "/foo/bar"。
$route.params
- 类型:
  
  Object
一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
$route.query
- 类型:
  
  Object
  
  一个 key/value 对象，表示 URL 查询参数。例如，对于路径
  
  /foo?user=1，则有
  
  $route.query.user == 1，如果没有查询参数，则是个空对象。
$route.hash
- 类型:
  
  string
  
  当前路由的 hash 值 (带
  
  #) ，如果没有 hash 值，则为空字符串。
$route.fullPath
- 类型:
  
  string
  
  完成解析后的 URL，包含查询参数和 hash 的完整路径。
$route.matched
- 类型:
  
  Array<RouteRecord>
一个数组，包含当前路由的所有嵌套路径片段的

路由记录

。路由记录就是

routes

配置数组中的对象副本（还有在

children

数组）。
```
const router = new VueRouter({
  routes: [
    // 下面的对象就是 route record
    { path: '/foo', component: Foo,
      children: [
        // 这也是个 route record
        { path: 'bar', component: Bar }
      ]
    }
  ]
})
```
当 URL 为

/foo/bar，$route.matched

将会是一个包含从上到下的所有对象（副本）。
$route.name

当前路由的名称，如果有的话。（查看

命名路由）