前言：編程式路由在我們的項目使用過程中最常用的的方法了。

什么是編程式路由呢？就是通過寫js代碼來實現(xiàn)頁面的跳轉(zhuǎn)

1. router.push({path: 'name'});或者router.push('name')

首先我們來講講簡單的，上面兩個方法記住，等效的。
① 還是在test.vue組件里面寫個div并給它添加一個click跳轉(zhuǎn)事件：

<template>
    <div class="test">
    <!-- 動態(tài)路由-->
          this is id:{{$route.params.testId}}
      <br/>
          this is name:{{$route.params.testName}}
      <br/>
    <!--嵌套路由-->
      <router-link to="/test/title1">標(biāo)題1</router-link>
      <router-link to="/test/title2">標(biāo)題2</router-link>
      <router-view></router-view>
      <br/>
    <!--編程式路由-->
      <div @click="gotoGoods">跳轉(zhuǎn)到商品詳情頁面</div>
    </div>
</template>

<script>
    export default {
      name:'Test',
      data() {
        return {
          msg: 'hello vue'
        }
      },
      methods:{
        gotoGoods() {
          this.$router.push('/goods');
        }
      }

    }
</script>

<style scoped>

</style>

② 在view文件下新建一個goods.vue

<template>
    <div class="goods">
      this is goods
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>

③ 在router中引入這個goods組件(index.js)

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//引入組件
import Test from "@/view/test"
import Title1 from "@/view/title1"
import Title2 from "@/view/title2"
import Goods from "@/view/goods"

Vue.use(Router)

export default new Router({
  routes: [
    {
      // path: '/test/:testId',
      path:'/test/:testId/name/:testName',
      name: 'HelloWorld',
      //填寫路由參數(shù)
      component: Test,
      children:[{
        path: 'title1',
        name:'title1',
        component: Title1
      },
        {
          path: 'title2',
          name:'title2',
          component: Title2
        }
      ]
    },
    {
      path:'/goods',
      name:'goods',
      component:Goods
    }
  ]
})

④ 打開路徑為test的頁面并點擊

⑤ ok，點一下我們就到goods頁面了，實現(xiàn)了跟router-view標(biāo)簽一樣的效果

Ok，到這里我們已經(jīng)實現(xiàn)了編程式路由的跳轉(zhuǎn)了，接下來我們來試試路由攜帶參數(shù)跳轉(zhuǎn)并接受參數(shù)。

2.router.push({path: 'name',query:{a:123}})/router.push(path:'name?a=123')這兩種方式都可以

話不多說，看圖你應(yīng)該能看懂：

test.vue

<template>
    <div class="test">
    <!-- 動態(tài)路由-->
          this is id:{{$route.params.testId}}
      <br/>
          this is name:{{$route.params.testName}}
      <br/>
    <!--嵌套路由-->
      <router-link to="/test/title1">標(biāo)題1</router-link>
      <router-link to="/test/title2">標(biāo)題2</router-link>
      <router-view></router-view>
      <br/>
    <!--編程式路由-->
      <div @click="gotoGoods">跳轉(zhuǎn)到商品詳情頁面</div>
    </div>
</template>

<script>
    export default {
      name:'Test',
      data() {
        return {
          msg: 'hello vue'
        }
      },
      methods:{
        gotoGoods() {
          // this.$router.push('/goods');
          this.$router.push({
            path:'/goods?goodsId=12345'
          });
          this.$router.push({
            path:'/goods',
            query:{
              goodsId:12345
            }

          })
        }
      }

    }
</script>

<style scoped>

</style>

② 在goods.vue中輸入

提醒一句，這里的獲取上一級頁面?zhèn)鬟^來的參數(shù)是route不是$router：

<template>
    <div class="goods">
      this is goods
      <span>{{$route.query.goodsId}}</span>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>

③ ok，我們就可以看到頁面中顯示上級頁面?zhèn)鬟^來的參數(shù)了：

3.$router.go();
這個就隨意提一下，就是類似于history.go()的方法，括號里面填個1就是前進(jìn)一級頁面，-1就后退一級頁面。差不多就是這樣。