vue页面中在点击某个新增的button后，将当前页面改变成新增界面，且地址栏不变

Question

项目上的一个需求

点击添加讨论后 需要出现新增讨论的fron页面 且完全覆盖掉之前的查询页

点击后的效果是这样的

 

Answer 1

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,
    }
  ]
})