需要用到的知识点:router router-link router-view components
app.vue
<template>
<div>
<router-link to="/logoin">登录</router-link>
<router-link to="/header">首页</router-link>
<router-view> </router-view>
//路由占位符,
</div>
</template>
header.vue
<template>
<div>
我是header页面
</div>
</template>
logoin
<template>
<div>
我是logoin页面
</div>
</template>
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from "../components/HelloWorld"
import header from '../views/header.vue'
import logoin from '../views/logoin.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/logoin',
name: 'logoin',
component: logoin
},
{
path: '/header',
name: 'header',
component: header
}
]
const router = new VueRouter({
routes
})
export default router