编程式路由

编程式路由就是通过js来跳转组件
现在实现通过goods组件向购物组件的跳转，他们都挂载于app.vue上

第一步： app.vue 添加挂载

<router-view></router-view>

第二步：实现goods组件的代码：

<template>
 <div>
      <h1>我是商品详情页</h1>
      
         <button v-on:click="tiao">跳转到购物车组件</button>   //添加事件，跳转到购物组件。
 </div>

</template>
<script>
export default {
 methods:{
     tiao() {
        // this.$router.push({name:'shopping'});  //通过name跳转
        //this.$router.push({path:'/cart'})         //通过path跳转
         //this.$router.push({path:'/cart?a=124'})       //跳转的同时传递参数
         this.$router.push({path:'name',query:{a:123}})   //跳转路路并传递参数的另一种方式
         //$router.go(1)            //这个其实就是window.history.go();

         //{{$route.query.a}}    编程式路由获取参数的方式，注意与动态路由获取参数方式的不同（$router.params.id）
     }
 }
}
</script>

router/index.js中的代码

import content from './../components/content.vue';
import shopping from './../components/shopping.vue';
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'goods',
      component: goods,
    },
     {
       path: '/cart',
       name:'shopping',
       component: shopping,
     }
  ]
})

在goods组件中单击按钮即可跳转至购物组件。