上模板 router-link是属于组件 组件即可使用内部属性 {{ i.title }}是html模板语法
<template>
<div class="header">
<div class="nav">
<a href="#" class="logo"><img src="/static/images/logo.jpg" alt=""></a>
<ul v-for="i in navList">
<li> <router-link :to="i.url">{{ i.title }}</router-link></li>
</ul>
<a href="#" class="logo-right"><img src="/static/images/logo2.png" alt=""></a>
<div class="tubox">
<div class="tubiaobox">
<a href="#" class="tubiao" title="微博登录"></a>
<a href="#" class="qqtubiao" title="qq登录"></a>
<a href="#" class="wxtubiao" title="微信登录"></a>
</div>
</div>
</div>
</div>
</template>
js代码 data (){} 是es6的写法 es5的写法是 data:function(){} 比较简洁
<script>
export default {
name: 'navs',
data () {
return {
navList: [
{title: '首页', url: '/HomePage'},
{title: '目的地', url: '/Destination'},
{title: '旅游攻', url: '/Strategy'},
{title: '去旅游', url: '/Travel'},
{title: '机票火车票', url: '/Plane'},
{title: '鸡精', url: '/Hotel'}
]
}
}
}
</script>
