Vue router组件化开发总结

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)
//后退一步