编程式路由就是通过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组件中单击按钮即可跳转至购物组件。