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代码的方式实现路由跳转

<template>
    <div>
        这是商品列表页面
        <span>{{ $route.params.goodsId }}</span><br>
        <span>{{ $route.params.name }}</span>
        <router-link to="/goods/title">显示商品标题</router-link>
        <router-link to="/goods/image">显示商品图片</router-link>
        <div>
            <router-view></router-view>
        </div>
        <router-link :to="{name: 'cart',params: {cartId: '123'}}">跳转到购物车页面</router-link>
        <button @click="jump">button —— 跳转到购物车页面</button>
    </div>
</template>
<script>
export default {
  methods: {
    jump () {
      this.$router.push({path: '/cart?goodsId=123'})
    }
  }
}
</script>
<style>
</style>