编程式路由,即通过写js 函数,实现路由的跳转。之前路由跳转是通过router-link实现,本篇,我们通过函数来实现router-link 的跳转功能。
举例。
首先是router/index.js 代码,如下。
import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'
import Title from '@/views/Title'
import Image from '@/views/Image'
import Cart from '@/views/Cart'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/goods',
name: 'GoodList',
component: GoodList,
children: [
{
path: 'title',
name: 'Title',
component: Title
}, {
path: 'image',
name: 'Image',
component: Image
}
]
}, {
path: '/cart',
name: 'Cart',
component: Cart
}
]
})
然后是cart.vue 代码如下。
<template>
<div>
购物车
<span>{{$route.query.goodsId}}</span>
</div>
</template>
<script>
export default {
name: 'Cart'
}
</script>
最后是Goodlist.vue 代码如下。
<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="/cart">跳转到购物车</router-link>
<button @click="jump">button - 跳转到购物车</button>
</div>
</template>
<script>
export default {
name: 'GoodList',
methods: {
jump() {
this.$router.push({path: '/cart?goodsId=123'});
// this.$router.push('/cart');
}
}
}
</script>
<style scoped>
</style>
Done!