嵌套默认路由

最新推荐文章于 2023-07-29 16:30:45 发布

蓝妮365

最新推荐文章于 2023-07-29 16:30:45 发布

阅读量279

点赞数

分类专栏：嵌套路由文章标签： vue

本文链接：https://blog.csdn.net/lany365/article/details/108226837

版权

嵌套路由专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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,
    }
]