router-link路由跳转

文件整体构造

 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')