vue 搭配路由

/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import GoodsList from './../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Cart from '@/views/Cart'



Vue.use(Router)

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

<template>
    <div>
        这是商品列表页面
        <!-- <span>{{$router.params.goodsId}}</span> -->
        <!-- <span>{{$router.params.name}}</span> -->
        <router-link to="/goods/title">显示商品标题</router-link>
        <router-link to="/goods/img">显示商品图片</router-link>
        <div>
            <router-view></router-view>
        </div>
        <router-link to="/cart">购物车</router-link>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>