a、商品列表页面如下(点击'跳转到购物车页面'就会跳到一个新的页面,而不是在同一个页面加载一个组件)
<template>
<div>
这是商品列表页面
<router-link to='/goods/title'>显示商品标题</router-link>
<router-link to='/goods/image'>显示商品图片</router-link>
// 跳转到购物车页面
<router-link to='/cart'>跳转到购物车页面</router-link>
<button @click="jump">Button-跳转到购物车页面</button>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data(){
return{
msg: ''
}
},
methods: {
jump(){
//this.$router.push("/cart")
//传递的参数用{{ $route.query.goodsId }}获取
this.$router.push({path: '/cart?goodsId=12'})
//this.$router.go(-2)
//后退两步
}
}
}
</script>
<style>
</style>
b、通过<router-link>方法还需要修改路由文件src/router/index.js,其他方法不用看了
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'
// 2、导入Cart组件
import Cart from '@/views/Cart'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/goods',
name: 'GoodsList',
component: GoodsList,
children: [
{
path: 'title',
name: 'title',
component:Title
},
{
path: 'image',
name: 'image',
component:Image
}
]
},
// 1、写入购物车组件
{
path: '/cart',
component: Cart,
}
]
})
作者:爱特李斯特
来源:CSDN
原文:https://blog.csdn.net/qq_33867131/article/details/81264206