vue编程式导航，命名路由

//使用 window.location.href 的形式，叫做 编程式导航   绑定事件的形式
<template>
    <div class="goods-item" v-for="item in goodslist" :key="item.id" @click="goDetail(item.id)">
    </div>
</template>

</script>
export default {
   goDetail(id) {
      // 使用JS的形式进行路由导航

      // 1. 最简单的
      // this.$router.push("/home/goodsinfo/" + id);

      // 2. 传递对象
      // this.$router.push({ path: "/home/goodsinfo/" + id });

      // 3. 传递命名的路由
      this.$router.push({ name: "goodsinfo", params: { id : id } });
    }
  }
};
</script>

var router = new VueRouter({
  routes: [ // 配置路由规则
    { path: ‘/‘, redirect: ‘/home‘ },
    { path: ‘/home‘, component: HomeContainer },
    { path: ‘/home/goodsinfo/:id‘, component: GoodsInfo, name: ‘goodsinfo‘ },
    { path: ‘/home/goodsdesc/:id‘, component:GoodsDesc, name: ‘goodsdesc‘  },
  ],
  linkActiveClass: ‘mui-active‘
  // 覆盖默认的路由高亮的类，默认的类叫做 router-link-active
})

//配置路由的规则的属性包含：path，redirect，component，children，name

注意： 一定要区分 this.$route 和 this.$router 这两个对象，this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址

原文地址：https://www.cnblogs.com/ll15888/p/11240041.html