路由(二) router-link的使用

main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import footer from './components/footer.vue'
import header from './components/header.vue'
import body from './components/body.vue'
Vue.use(VueRouter);

let router=new VueRouter({
routes:[
{name:'footer',path:'/footer',component:footer},
{name:'header',path:'/header',component:header},
{name:'body',path:'/body',component:body}
]
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

 

app.vue

<template>
<div>
<!--留坑 非常重要-->
<router-view></router-view>
<router-link :to="{name:'header'}">header</router-link>
<router-link :to="{name:'footer'}">footer</router-link>
<router-link :to="{name:'body'}">body</router-link>
</div>
</template>

<script>

export default{
data(){
return{
msg:"这是一个aaa"
}
},
methods:{

}
}

</script>

<style>

</style>