之三 编程式路由

编程式路由，即通过写js 函数，实现路由的跳转。之前路由跳转是通过router-link实现，本篇，我们通过函数来实现router-link 的跳转功能。

举例。

首先是router／index.js 代码，如下。

import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Cart from '@/views/Cart'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/goods',
      name: 'GoodList',
      component: GoodList,
      children: [
        {
          path: 'title',
          name: 'Title',
          component: Title
        }, {
          path: 'image',
          name: 'Image',
          component: Image
        }
      ]
    }, {
      path: '/cart',
      name: 'Cart',
      component: Cart
    }
  ]
})

然后是cart.vue 代码如下。

<template>
  <div>
    购物车
    <span>{{$route.query.goodsId}}</span>
  </div>
</template>

<script>
export default {
  name: 'Cart'
}
</script>

最后是Goodlist.vue 代码如下。

<template>
  <div>
    这是商品列表页
    <span>{{$route.params.goodsId}}</span>
    <br />
    <span>{{$route.params.name}}</span>
    <router-link to="/goods/title">显示商品标题</router-link>
    <router-link to="/goods/image">显示商品图片</router-link>
    <div>
      <router-view></router-view>
    </div>
    <router-link to="/cart">跳转到购物车</router-link>
    <button @click="jump">button - 跳转到购物车</button>
  </div>
</template>

<script>
export default {
  name: 'GoodList',
  methods: {
    jump() {
      this.$router.push({path: '/cart?goodsId=123'});
      // this.$router.push('/cart');
    }
  }
}
</script>

<style scoped>

</style>

Done!