1、首先定义两个组件news.vue、message.vue
2、在index.js中将路由组件映射成路由表
首先,导入import News from '../views/news.vue'
其次,在children中配置路由,其他写法同基本路由,注意path的不同
/**
* Created by Administrator on 2018/12/3.
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/about.vue'
import Home from '../views/home.vue'
import News from '../views/news.vue'
import Message from '../views/message.vue'
Vue.use(VueRouter)
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
//path:'/news',//path最左侧的/永远代表根路径,错误写法
path:'/home/news', //正确写法
component:News
},
{
path:'message', //简化写法
component:Message
},
{
path:'',
redirect:'/home/news'
}
]
},
{
path:'/',
redirect:'/about'
}
]
})
3、上面两个路由嵌套在home.vue中,故在home.vue中使用
4、效果图如下