Vue router就是Vue路由，是Vue不同組件之間跳轉(zhuǎn)的重要方式。主要分為帶參數(shù)跳轉(zhuǎn)和不帶參數(shù)跳轉(zhuǎn)兩種方式
在組件化開發(fā)里，Vue router都是在項(xiàng)目根目錄下router.js統(tǒng)一管理，使用AMD規(guī)范將組件引入進(jìn)來(lái)

import downApp from '@/components/downApp.vue'

隨后引用Router，再將接口暴露出去，一般使用webpack構(gòu)建項(xiàng)目的時(shí)候就已經(jīng)做好這個(gè)步驟了

Vue.use(Router)
export default new Router({
  //歷史模式，也就是將頁(yè)面上鏈接的主頁(yè)前面的無(wú)用信息過(guò)濾掉
  mode:'history',
  routers:[{}...]

})

routers便是定義路由的地方，參數(shù)分別有path(路徑)，name(可選，路由名)，alias(可選，別名)，component(組件名)，meta(可選，元數(shù)據(jù)，多用在導(dǎo)航守衛(wèi)上)，redirect(可選，重定向，多用于導(dǎo)航守衛(wèi)返回原頁(yè)面)

需要注意的是，path在定義子路由時(shí)，不能加上/

路由需要跳轉(zhuǎn)，需要在template構(gòu)建<router-view></router-view>，組件將會(huì)在這里進(jìn)行渲染

不帶參數(shù)的跳轉(zhuǎn)

<router-link to="/foo">Go to Foo</router-link>

帶參數(shù)的跳轉(zhuǎn)

帶參數(shù)的跳轉(zhuǎn)一般使用函數(shù)的形式，一般有以下幾種方式

• 帶查詢參數(shù)，使用path和query

                this.$router.push({
                    path:'/song',
                    query:{id}
                })

這種方式不需要為路由命名，變成/song?id=，使用這種傳遞方式時(shí)，接收參數(shù)的組件可以在query參數(shù)里面獲取相應(yīng)的參數(shù)

//目標(biāo)組件可以用這種方式接受參數(shù)
this.$route.query.id

• 命名組件帶參數(shù)

this.$router.push({
  name:'/song',
  params:'{id}'
})

這種方式需要為路由命名，變成/song/參數(shù)值

如果path和params共用并且沒(méi)有name時(shí)，params不會(huì)生效

• url帶參數(shù)

router.push({ path: `/song/${id}` })

這種方式也是變成/song/參數(shù)值

使用router.go(n)操作history

router.go(1)
//前進(jìn)一步
router.go(-1)
//后退一步