Vue router就是Vue路由，是Vue不同组件之间跳转的重要方式。主要分为带参数跳转和不带参数跳转两种方式
在组件化开发里，Vue router都是在项目根目录下router.js统一管理，使用AMD规范将组件引入进来
import downApp from '@/components/downApp.vue'
随后引用Router，再将接口暴露出去，一般使用webpack构建项目的时候就已经做好这个步骤了
Vue.use(Router)
export default new Router({
//历史模式，也就是将页面上链接的主页前面的无用信息过滤掉
mode:'history',
routers:[{}...]
})
routers便是定义路由的地方，参数分别有path(路径)，name(可选，路由名)，alias(可选，别名)，component(组件名)，meta(可选，元数据，多用在导航守卫上)，redirect(可选，重定向，多用于导航守卫返回原页面)
需要注意的是，path在定义子路由时，不能加上
/
路由需要跳转，需要在template构建<router-view></router-view>，组件将会在这里进行渲染
不带参数的跳转
<router-link to="/foo">Go to Foo</router-link>
带参数的跳转
带参数的跳转一般使用函数的形式，一般有以下几种方式
- 带查询参数，使用
path和query
this.$router.push({
path:'/song',
query:{id}
})
这种方式不需要为路由命名，变成/song?id=，使用这种传递方式时，接收参数的组件可以在query参数里面获取相应的参数
//目标组件可以用这种方式接受参数
this.$route.query.id
- 命名组件带参数
this.$router.push({
name:'/song',
params:'{id}'
})
这种方式需要为路由命名，变成/song/参数值
如果
path和params共用并且没有name时，params不会生效
- url带参数
router.push({ path: `/song/${id}` })
这种方式也是变成/song/参数值
使用router.go(n)操作history
router.go(1)
//前进一步
router.go(-1)
//后退一步
