嵌套默认路由

HOME页面嵌套默认路由

        <router-link to="/home/news" >news</router-link><!---'／'必须要-->
        <router-link to="/home/message">message</router-link>
        <router-view></router-view><!---占位，为倒入NEW和MESSAGE必须要-->

router/index.js下的路径

const Home = () => import('../components/Home')
//子组件添加
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')


const About = () => import('../components/About')
const User = () => import('../components/User')

//1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)
//2.创建VueRouter对象
const routes = [
    {
        path: '',
        redirect:'/home'
    },
    {
        path: '/home',
        component: Home,
        //子组件添加，第一个为空，导入默认显示用redirect
        children: [
            {
                path: '',
                redirect: 'news'
            },
            {
                path: 'news',
                component: HomeNews,
            },
            {
                path: 'message',
                component: HomeMessage,
            }
        ]
    },
    {
        path: '/about',
        component: About,
    },
    {
        path: '/user/:userId',
        component: User,
    }
]