}
</style>
DemoContact.vue:
<template>
<div id="contact">
<h2>this is contact</h2>
</div>
</template><script>
export default({
name:'contact'
})
</script>
<style scoped>
#contact{
width: 100%;
height: 500px;
background-color: lightskyblue;
}
</style>
创建好以上组件后，再使用ES6语法导入到main.js:
import DemoHome from './components/DemoHome'
import DemoAbout from './components/DemoAbout'
import DemoContact from './components/DemoContact'最后在Vue实例中加入路由属性就可以了
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})完整的main.js应该是这样：
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import DemoHome from './components/DemoHome'
import DemoAbout from './components/DemoAbout'
import DemoContact from './components/DemoContact'Vue.use(VueRouter)
Vue.config.productionTip = false
const router = new VueRouter({
mode: 'history',
routes:[
{path: '/', component:DemoHome},
{path: '/about', component:DemoAbout},
{path: '/contact', component:DemoContact}
]})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
在这里我们为了学习，所以我们简单的做个布局。接下来，我会再创建两个组件，一个叫DemoHeader, 一个叫DemoFooter。DemoHeader里面我放一个logo的图片，和导航，而这个导航的路由也将会使用我们前面定义的路由；DemoFooter就比较简单了，放一些footer信息。
下面我们看下这两个组件的代码：
DemoHeader.vue:
<template>
<div id="header" class="wrap">
<div class="header">
<h1 class="logo">
<router-link to="/">
</router-link>
</h1>
</div>
<div class="top-nav">
<div id="navList" class="navlist-wrap">
<div class="navlist clearfix">
<span class="nav-btn">
<router-link to="/">首页</router-link>
</span>
<span class="nav-btn">
<router-link to="/about">关于</router-link>
</span>
<span class="nav-btn">
<router-link to="/contact">联系方式</router-link>
</span>
</div>
