创建四个基本的组件
Home.vue
<template>
<div id="home" class="home-box">
首页
<button @click="goNews()">通过js点击跳转到新闻页</button>
</div>
</template>
<script>
export default {
data(){
return{
msg:"首页组件",
name:"父子组件传值---值在父亲这边定义的",
name2:"父组件的title",
goodsList:[]
}
},
methods:{
goNews(){
this.$router.push({path:"news"})
}
},
components:{
},
mounted(){
}
}
</script>
<style lang="scss" scoped>
.list{
li{
height:3.4rem;
line-height:3.4rem;
boder-bottom:1px solid #eee;
font-size:1.6rem;
a{
color:#666;
}
}
}
</style>
News.vue
<template>
<div>
<h2>新闻列表组件</h2>
<ul>
<li v-for="item in goodsList">
<router-link :to="'/gContent?id='+item.aid">
{{item.title}}
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
msg:"父组件的msg",
goodsList:[
]
}
},
components:{
},
methods:{
RequestData(){
var api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"
this.$http.jsonp(api).then((response)=>{
this.goodsList = response.body.result
},(err)=>{
console.log(err);
})
}
},
mounted(){
this.RequestData();
}
}
</script>
<style lang="scss" scoped>
</style>
APP.vue
<template>
<div id="app">
<header >
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻页</router-link>
<router-link to="/user">用户</router-link>
</header>
<div class="vue-Router" >
<router-view></router-view>
</div>
</div>
</template>
mian.js
import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
//1.引入并 Vue.use(VueRouter) (main.js)
Vue.use(VueResource);
Vue.use(VueRouter);
//2.配置路由 创建组件 引入组件 定义路由 (建议复制s)
import home from './components/Home.vue';
import news from './components/News.vue';
import user from './components/User.vue';
import gContent from './components/Gcontent.vue';
import addUser from './components/User/addUser.vue';
import listUser from './components/User/listUser.vue';
const routes = [
{ path: '/home', component: home },
{ path: '/news', component: news },
/* { path: '/content/:id',component:content},*/ /* 用/:id 的方法传值,获取用this.$route.params*/
{ path: '/gContent',component:gContent}, /* 用/?id=123 的方法传值,获取用this.$route.query*/
/*{ path: '*', redirect: '/home' },*/
//路由的嵌套,先配置父路由,/user ,再配置子路由的属性 最后<router-link to="/user/userlist"></router-link>
{
path:'/user',component:user,
children:[
{
path: 'useradd', component: addUser
},
{
path: 'userlist', component: listUser
}
]
}
/* 默认跳转路由*/
];
//3.实例化VueRouter
const router = new VueRouter({
mode: 'history', //hash模式改为history模式 可以使访问的url不同
routes // (缩写)相当于 routes: routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
});