Vue中路由的嵌套
import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/css/basic.scss'; /*路由的嵌套 1.配置路由 { path: '/user', component: User, children:[ { path: 'useradd', component: UserAdd }, { path: 'userlist', component: Userlist } ] } 2.父路由里面配置子路由显示的地方 <router-view></router-view> */ //请求数据 import VueResource from 'vue-resource'; Vue.use(VueResource); import VueRouter from 'vue-router'; Vue.use(VueRouter); //1.创建组件 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 UserAdd from './components/User/UserAdd.vue'; import Userlist from './components/User/Userlist.vue'; //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', component: News,name:'news' }, { path: '/user', component: User, children:[ { path: 'useradd', component: UserAdd }, { path: 'userlist', component: Userlist } ] }, { path: '/content/:aid', component: Content }, /*动态路由*/ { path: '*', redirect: '/home' } /*默认跳转路由*/ ] //3.实例化VueRouter 注意:名字 const router = new VueRouter({ mode: 'history', /*hash模式改为history*/ routes // (缩写)相当于 routes: routes }) //4、挂载路由 new Vue({ el: '#app', router, render: h => h(App) }) //5 <router-view></router-view> 放在 App.vue
<template> <div id="app"> <header class="header"> <router-link to="/home">首页</router-link> <router-link to="/news">新闻</router-link> <router-link to="/user/useradd">用户</router-link> </header> <hr> <router-view></router-view> </div> </template> <script> export default { data () { return { msg:'你好vue' } } } </script> <style lang="scss"> .header{ height:4.4rem; background:#000; color:#fff; line-height:4.4rem; text-align:center; a{ color:#fff; padding:0 2rem } } </style>
<template> <!-- 所有的内容要被根节点包含起来 --> <div id="user"> <div class="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> </div> </template> <script> export default{ data(){ return { msg:'我是一个user组件' } } } </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 id="adduser"> 增加用户 </div> </template>
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!