文件整体构造
pages/Message.vue
<template>
<h2>这是Message页面</h2>
</template>
<script>
export default {
name:'Message'
}
</script>
<style>
</style>
其他几个跳转页面改名即可
router/index.js
//该文件主要创建整个应用的路由器
import VueRouter from 'vue-router'
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'
export default new VueRouter({
routes:[
{
//http://localhost:8080/home
path:'/home',//key
component:Home//value
},
{
path:'/about',
component:About
},
{
path:'/message',
component:Message
},
{
path:'/news',
component:News
}
]
})
App.vue
<template>
<div id="app">
<router-link to="/home">Home</router-link>||
<router-link to="/about">About</router-link>||
<router-link to="/Message">Message</router-link>||
<router-link to="/News">News</router-link>
<hr />
<router-view></router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
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
}).$mount('#app')