路由组件pages/AboutInfo.vue
<template>
<div>
<h1>我是About内容</h1>
</div>
</template>
<script>
export default {
name: "AboutInfo"
}
</script>
路由组件pages/HomeInfo.vue
<template>
<div>
<h1>我是Home内容</h1>
</div>
</template>
<script>
export default {
name: "HomeInfo"
}
</script>
创建并暴露路由器 router/index.js
import VueRouter from "vue-router"
//引入组件
import AboutInfo from "../pages/AboutInfo"
import HomeInfo from "../pages/HomeInfo"
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path: "/about",
component: AboutInfo
},
{
path: "/home",
component: HomeInfo
}
]
})
引入并配置路由器main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
//引入路由器
import router from "./router"
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
render: h => h(App),
router: router
}).$mount('#app')
App组件中使用路由器App.vue
<template>
<div>
<router-link to="/about">About</router-link>
<router-link to="/home">Home</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
}
</script>
运行效果如下图: