<template>
<div id="app">
<router-link to='/home'>首页</router-link>
<router-link to='/news'>新闻</router-link>
<router-link to='/pcontent'>商品详情</router-link>
<router-link to='/user'>用户中心</router-link>
<router-view />
</div>
</template>
<script>
// 生命周期函数:组件挂载以及组件更新组件销毁的时候触发的一系列的方法,这些方法就叫做生命周期函数
// 引入
export default {
data () {
return {
name: 'App'
}
},
mounted () { // 请求数据,操作dom , 放在这个里面 mounted
console.log('模板编译完成4')
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<template>
<div id="user">
<div class="left">
<ul>
<li>
<router-link to="/user/useradd"> 增加用户</router-link>
</li>
<li>
<router-link to="/user/userlist"> 用户列表</router-link>
</li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: '用户中心'
}
}
}
</script>
<style lang='scss' scoped>
.user {
display: flex;
.left {
width: 200px;
min-height: 400px;
border-right: 1px solid #eee;
li {
line-height: 2;
}
}
.right {
flex: 1;
}
}
</style>
<template>
<div class="userlist">
{{msg}}
</div>
</template>
<script>
export default {
data () {
return {
msg: 'userlist'
}
}
}
</script>
<template>
<div class="useradd">
{{msg}}
</div>
</template>
<script>
export default {
data () {
return {
msg: 'useradd'
}
}
}
</script>
import Vue from 'vue'
import Router from 'vue-router'
import VueResource from 'vue-resource'
import HelloWorld from '@/components/HelloWorld'
// 1 引入组件
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import Content from '@/components/Content.vue'
import Pcontent from '@/components/Pcontent.vue'
import User from '@/components/User.vue'
import UserAdd from '@/components/User/UserAdd.vue'
import UserList from '@/components/User/UserList.vue'
Vue.use(Router)
Vue.use(VueResource)
export default new Router({
// 配置路由
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/home',
name: 'Home',
component: Home
}, {
path: '/news',
name: 'News',
component: News
}, {
// 动态路由
path: '/content/:aid',
name: 'Content',
component: Content
}, {
path: '/pcontent',
name: 'Pcontent',
component: Pcontent
}, {
path: '/user',
name: 'User',
component: User,
children: [
{
path: 'useradd',
name: 'UserAdd',
component: UserAdd
},
{
path: 'userlist',
name: 'UserList',
component: UserList
}
]
}, {
// 重定向
path: '*',
redirect: '/home'
}
]
})