Vue全家桶学习（二）

Vue-router 插件的使用

一、动态路由配置

     通过在路径上使用  /:变量  的方式去实现，例如：

export default new Router({
  mode: 'history', // 路由模式 hash | history
  routes: [
    {
      path: '/goods/:goodsId/user/:name',
      name: 'GoodsList',
      components: {
        default: GoodsList,
        title: Title,
        img: Image
      }
    },
  ]
})

二、 嵌套路由配置

        添加children来配置子路由

export default new Router({
  mode: 'history', // 路由模式 hash | history
  routes: [
    {
      path: '/goods/:goodsId/user/:name',
      name: 'GoodsList',
      components: {
        default: GoodsList,
        title: Title,
        img: Image
      },
      children: [
        {
          path: 'title',
          name: 'title',
          component: Title
        },
        {
          path: 'image',
          name: 'image',
          component: Image
        }
      ]
    },
    {
      path: '/cart/:cartId',
      name: 'cart',
      component: Cart
    }
  ]
})

三、编程式路由的实现

    通过使用JavaScript代码的方式实现路由跳转