main.js入口文件
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
vue-router/inde.js
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
import newstpl from '@/components/news'
import abountpl from '@/components/abount'
import casetpl from '@/components/case'
import showtpl from '@/components/show'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: index
},
{
path: '/news',
name: 'news',
component: newstpl,
},
{
path: '/case',
name: 'case',
component: casetpl,
},
{
path: '/abount',
name: 'abount',
component: abountpl
},
]
})
app.vue 文件
<template>
<div id="app">
<img src="./assets/logo.png">
<div class="nav">
<router-link to="/" exact>首页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/case">案例</router-link>
<router-link to="/abount">联系我们</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.nav a{display: inline-block;margin: 0px 10px;color:#000;text-decoration: none;}
.nav a.router-link-active{color:green;text-decoration: underline;}
</style>
news.vue新闻列表
<template>
<div>
<h3>{{title}}</h3>
<ul>
<li v-for="(tmp,index) in list">
<router-link :to="{path:'/news/show',query:{ id:index,title:tmp.title }}">{{tmp.title}}<span>{{tmp.date}}</span></router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'news',
data () {
return {
title:'我是新闻列表',
list:[
{id:0,title:'新闻一',date:'2018-07-16'},
{id:1,title:'新闻二',date:'2018-07-15'}
]
}
}
}
</script>
<style>
ul{background:#eee;text-align: left;padding: 10px 10px}
ul li{list-style: none;line-height: 30px;}
ul li span{float: right;padding-right: 20px;}
</style>
index.vue首页
<template id="indexnews">
<div class="indexClass">
<h3>{{title}}</h3>
<ul class="home">
<li v-for="(data ,index) in newsList">{{data}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
title:"我是首页的内容",
newsList:[
"产品展示1","产品展示2","产品展示3"
]
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.indexClass{background: #eee;margin: 10px 0px;padding:10px 0px}
.indexClass ul{padding:0px;text-align: left;}
.indexClass ul li{line-height: 30px;padding-left: 10px}
</style>
case.vue案例
<template>
<div>
<h3>{{title}}</h3>
<ul>
<li v-for="(tmp,index) in list">
<router-link :to="{path:'/show',query:{ id:index,title:tmp.title }}">{{tmp.title}}<span>{{tmp.date}}</span></router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'case',
data () {
return {
title:'我是案例',
list:[
{id:0,title:'深圳广告公司',date:'2018-07-26'},
{id:1,title:'广州休闲',date:'2018-07-25'}
]
}
}
}
</script>
<style>
ul{background:#eee;text-align: left;padding: 10px 10px}
ul li{list-style: none;line-height: 30px;}
ul li span{float: right;padding-right: 20px;}
</style>
abount.vue关于我们
<template>
<div>
<h3>{{title}}</h3>
<div class="abountClass">{{msg}}</div>
</div>
</template>
<script>
export default {
name: 'about',
data () {
return {
title:'这是关于我们',
msg: '您的电话是15899852297'
}
}
}
</script>
<style>
.abountClass{margin:10px;padding: 10px;background: #eee}
</style>
效果图