Vue-route路由的嵌套使用

Vue-route路由的嵌套使用

在vue项目中往往会用到Vue route的嵌套，通过在route中添加children可以实现路由的嵌套功能。

import VueRouter from 'Vue-router'
import Vue from 'vue'

//懒加载
const Home = () => import('../component/Home')
const HomeNewscom = () => import('../component/Home')
const HomeMessagescom = () => import('../component/Home')

const routes = [
    {
    
    
        path : '',
        //重定向
        redirect : '/home',
    },
	{
    
    
        path : '/home',
        component : Home,
        //路由的嵌套
        children:[
    		{
    
    
        		path : '',
    			//重定向
    			redirect : 'news'
    		},
        	{
    
    
        		path : 'news',
    			component : HomeNewscom 
    		},
            {
    
    
        		path : 'messages',
    			component : HomeMessagescom 
    		}
        ]
    }
]

const router = new VueRouter({
    
    routes})
export default router;