一 创建测试项目
vue init webpack-simple vuedemo
二 进入demo目录
cd vuedemo
三 安装依赖
cnpm install
四 安装sass vue-router vue-resource
cnpm install node-sass sass-loader --save
cnpm install vue-router --save
cnpm install vue-resource --save
五 修改代码
├── src
│ ├── App.vue
│ ├── components
│ │ ├── Content.vue
│ │ ├── Home.vue
│ │ ├── News.vue
│ │ ├── User
│ │ │ ├── AddUser.vue
│ │ │ └── UserList.vue
│ │ └── User.vue
│ ├── main.js
App.vue
<template>
<div id="app">
<header class="header">
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
<router-link to="/user/userlist">user</router-link>
</header>
<hr>
<br>
<router-view></router-view>
</div>
</template>
<script>
import Home from './components/Home.vue';
import News from './components/News.vue';
import User from './components/User.vue';
export default {
name: "app",
data() {
return {
msg:'hello vue world!',
};
},
components:{
'v-home':Home,
'v-news':News,
'v-user':User
},
};
</script>
<style>
.header{
height: 4.4em;
background: #000;
color:#fff;
line-height: 4.4rem;
text-align: center;
}
.header a{
color:#fff;
padding: 0 2 rem;
}
</style>
Content.vue
<template>
<div id="content">
i am content
<h2>{{list.title}}</h2>
<div v-html="list.content"></div>
</div>
</template>
<script>
export default {
data(){
return {
msg: "content",
list: []
}
},
methods:{
requestData(aid){
console.log(aid)
var api = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=" + aid
this.$http.get(api).then((response)=>{
console.log(response.body.result[0])
this.list = response.body.result[0];
},(err)=>{
console.log(err)
})
}
},
mounted(){
console.log(this.$route.params)
var aid = this.$route.params.aid;
this.requestData(aid);
},
}
</script>
Home.vue
<template>
<!-- all content need in root-->
<div>
Home
<br>
<ul>
<li v-for="(item,k) in list" :key="item.id">
<router-link :to="'/pcontent?id='+k">{{k}} -- {{item}} </router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
msg:'i am home component!',
list:['goods1', 'goods2','goods3']
}
}
}
</script>
<style>
</style>
News.vue
<template>
<!-- all content need in root-->
<div>
News
<br>
<ul>
<li v-for="(item,k) in list" :key="item.id">
<router-link :to="'/content/'+item.aid">{{k}} -- {{item.title}} </router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
msg:'i am news component!',
list:[]
}
},
methods:{
requestData(){
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
console.log(this.$http)
this.$http.jsonp(api).then(function(response){
console.log(response)
this.list = response.body.result;
},function(err){
console.log(err)
})
}
},
mounted(){
this.requestData();
}
}
</script>
<style>
</style>
AddUser.vue
<template>
<div id="adduser">
Add User
</div>
</template>
UserList.vue
<template>
<div id="userlist">
User List
</div>
</template>
User.vue
<template>
<!-- all content need in root-->
<div id="user">
<div class="user">
<div class="left">
<ul>
<li>
<router-link to="/user/adduser"> Add User</router-link>
</li>
<li>
<router-link to="/user/userlist">User list</router-link>
</li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>
</div>
<br>
</div>
</template>
<script>
export default {
data(){
return {
msg:'i am user component!',
}
}
}
</script>
<style lang="scss">
.user{
display: flex;
.left{
width: 200px;
min-height:400px;
border-right:1px solid #eee;
.li{
line-height:2;
}
}
.right{
flex:1;
}
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import './assets/css/basic.scss'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import VueResource from 'vue-resource'
Vue.use(VueResource)
import Home from './components/Home.vue'
import News from './components/News.vue'
import Content from './components/Content.vue'
import User from './components/User.vue'
import AddUser from './components/User/AddUser.vue'
import UserList from './components/User/UserList.vue'
const routes = [
{path:'/home', component:Home},
{path:'/news', component:News},
{
path:'/user',
component:User,
children:[
{path:'adduser', component:AddUser},
{path:'userlist', component:UserList},
]
},
{path:'/content/:aid', component:Content},
{path:'*', redirect:''}
]
const router = new VueRouter({
routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
六 运行
npm run dev
image.png
七 总结
1 配置路由
{
path:'/user',
component:User,
children:[
{path:'adduser', component:AddUser},
{path:'userlist', component:UserList},
]
2 父路由里配置子路由显示的地方
<div class="left">
<ul>
<li>
<router-link to="/user/adduser"> Add User</router-link>
</li>
<li>
<router-link to="/user/userlist">User list</router-link>
</li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>
八 参考
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
