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>

<li><router-link to="/Hi1">Hi頁面一</router-link></li>

<li><router-link to="/Hi2">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'

import Hi1 from '../components/Hi1.vue'

import Hi2 from '../components/Hi2.vue'

// 配置路由

export default [

{

path: '/',

component: Hello

},

{

path: '/Hi',

component: Hi,

children:[

{

path: '/',

component: Hi

}, {

path: '/Hi1',

component: Hi1

}, {

path: '/Hi2',

component: Hi2

}

]

},

]

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>

components/Hi1.vue

<template>

<div>

<h1>{

{msg}}</h1>

</div>

</template>

<script type="text/javascript">

export default{

name:'Hi1',

data () {

return{

msg:"hi1 page"

}

}

}

</script>

<style type="text/css">

</style>

components/Hi2.vue

<template>

<div>

<h1>{

{msg}}</h1>

</div>

</template>

<script type="text/javascript">

export default{

name:'Hi2',

data () {

return{

msg:"hi2 page"

}

}

}

</script>

<style type="text/css">

</style>