路由(二) 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>
最新文章
- DuBrute 3.1
- 一些实用的Windows注册表
- mysql5.6 主从同步
- BZOJ2061 : Country
- oracle生成主键
- JS中同名函数有效执行顺序
- 深入理解java虚拟机【类加载机制】
- PHP实现微信公众账号开发
- redis实现有序的消息队列
- python【第三篇】函数
- ORACLE 中的一些特殊符号
- 关于java socket(转)
- 必应词典英语学习APP案例分析
- 「2017 山东三轮集训 Day1」Flair
- [py]Win10下的pip/pip3 install 导致utf-8编码问题的解决方案
- 动态代理Dynamic Proxy
- TFLearn 与 Tensorflow 一起使用
- python-ceilometerclient命令行(2)
- hadoop2.x学习笔记(一):YARN
- 【C++系列小结】面向过程的编程风格