前端路由的优缺点：
优点：用户体验好，不需要每次都从服务器获取，快速展现给用户
缺点：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
当前路由的名称，如果有的话。（查看
命名路由）
