vue中的路由

vue中4中路由包含：

1、动态路由
2、嵌套路由
3、编程式路由
4、命名式路由

1、动态路由

export default new Router({
  routes: [
    {
      path: '/goods/:goodsId/user/:name',   
      name: 'GoodsList',
      component: GoodsList
    }
  ]
})

    {{$route.params.goodsId}}

    {{$route.params.name}}

2、嵌套路由

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

    商品图片
    商品标题
    

3、编程式路由

export default new Router({
  routes: [
    {
      path:'/cart/:cartId',
      name: 'cart',
      component: Cart,
    },
  ]
})

跳转到购物车

4、命名式路由

命名式路由