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

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

  命名路由）