vue项目实战-3,页面跳转后台传值取值

page目录下创建goods目录创建goods.vue商品页面

<template>
	<div>
		这里是商品界面
	</div>
</template>

<script>
	export default{
		name:"Goods"
	}
</script>

<style>
</style>

修改router目录下index.js文件，设置路由

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../page/index/index.vue'//导入模块
import Goods from '../page/goods/goods.vue'
Vue.use(Router)

export default new Router({
	//每个数组配置的值都是一个路由
  routes: [
    {
		path: '/',
		name: 'Index',//路由名称
		component: Index//展示的模块
    },
	{
		path:"/goods",//当访问这个路径时 进入这个组件
		name:"Goods",
		component:Goods
	}
  ]
})

header页面添加

		<router-link to="/goods">商品</router-link>//

这里说一下a标签和router-link标签区别：

router-link组件避免了不必要的重渲染,它只更新变化的部分从而减少DOM性能消耗

通过方法形式跳转<