app.vue

<template>
<div id="app">
<h2>導航</h2>
<ul>
<li><router-link to="/" >Hello</router-link></li>
<li><router-link to="/Hi">Hi</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: ‘app‘
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
text-decoration: none;
}
</style>

main.js

import Vue from ‘vue‘
// 引用路由
import VueRouter from ‘vue-router‘
// 光引用不成，還得使用
Vue.use(VueRouter)
// 入口文件為 src/App.vue 文件 所以要引用
import App from ‘./App.vue‘
// 引用路由配置文件
import routes from ‘./router/index.js‘
// 使用配置文件規則
const router = new VueRouter({
routes
})
// 跑起來吧
new Vue({
router,
el: ‘#app‘,
render: (h) => h(App)
})

router/index.js

// 引用模板
import Hello from ‘../components/Hello.vue‘
import Hi from ‘../components/Hi.vue‘
// 配置路由
export default [
{
path: ‘/‘,
component: Hello
},
{
path: ‘/Hi‘,
component: Hi
},
]

components/Hello.vue

<template>
<div>
{{msg}}
</div>
</template>
<script type="text/javascript">
export default{
name:‘Hello‘,
data () {
return{
msg:"hello page"
}
}
}
</script>

components/Hi.vue

<template>
<div>
{{msg}}
</div>
</template>
<script type="text/javascript">
export default{
name:‘Hi‘,
data () {
return{
msg:"hi page"
}
}
}
</script>
<style type="text/css">

</style>

路由配置