vue中的路由

vue中4中路由包含：

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

1、动态路由

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

<div>
    <span>{{$route.params.goodsId}}</span><br>
    <span>{{$route.params.name}}</span>
</div>

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
        },
      ]
    }
  ]
})

<div>
    <router-link to="/goods/img">商品图片</router-link>
    <router-link to="/goods/title">商品标题</router-link>
    <div><router-view></router-view></div>
</div>

3、编程式路由

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

<button @click="jump">跳转到购物车</button>
<script>
    export default{
        data(){
            return {
                msg:'購物車'
            }
        },
        methods:{
            // 编程式路由 路由跳转                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
            jump(){
                //this.$router.go(-2);
                this.$router.push({
                    path:'/cart?gooid=123'
                })
            }
        }
    }
</script>

4、命名式路由

<router-link :to="{name:'cart',params:{cartId:123}}">命名式路由</router-link>