a、商品列表頁面如下（點選'跳轉到購物車頁面'就會跳到一個新的頁面，而不是在同一個頁面載入一個元件）
<template>
  <div>
    這是商品列表頁面
    <router-link to='/goods/title'>顯示商品標題</router-link>
    <router-link to='/goods/image'>顯示商品圖片</router-link>
    // 跳轉到購物車頁面
    <router-link to='/cart'>跳轉到購物車頁面</router-link>
     <button @click="jump">Button-跳轉到購物車頁面</button>
    <div>
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg: ''
    }
  },
  methods: {
    jump(){
    //this.$router.push("/cart")
    //傳遞的引數用{{ $route.query.goodsId }}獲取
    this.$router.push({path: '/cart?goodsId=12'})
    //this.$router.go(-2)
    //後退兩步
    }
  }
}
</script>

<style>
</style>


b、通過<router-link>方法還需要修改路由檔案src/router/index.js，其他方法不用看了

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
// 2、匯入Cart元件
import Cart from '@/views/Cart'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      	path: '/goods',
      	name: 'GoodsList',
      	component: GoodsList,
      	children: [
      		{
      	  		path: 'title',
          		name: 'title',
          		component:Title	
      		},

      		{
      	  		path: 'image',
          		name: 'image',
          		component:Image	
      		}
      	]
    },
    // 1、寫入購物車元件
    {
    	path: '/cart',
      	component: Cart,
    }
  ]
})