美食杰个人空间效果（子路由切换）

FuQiu.

于 2022-03-15 20:48:50 发布

阅读量124

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/G_Z_X/article/details/123511226

版权

本文介绍了如何在Vue应用中设置动态路由，包括使用`router-view`实现页面跳转，并详细讲述了如何为个人空间的四个子路由（作品、粉丝、关注和收藏）分别调用接口。同时，涵盖了如何通过`tab-click`事件实现路由切换的效果。

摘要由CSDN通过智能技术生成

效果如下
在这里插入图片描述

const Fans = ()=> import(/*wbpackChunkName:"space"*/ '@/views/user-space/fans');
const MenuList = ()=> import(/*wbpackChunkName:"space"*/ '@/views/user-space/menu-list');
// const Register =() => import('@/views/user-login/register');


const router = new Router({
    mode:"history",
    routes:[{
        path:'/',
        name:"Home",
        component:Home
    },
    {
        path:'/detail',
        name:"detail",
        component:Detail
    },
    {
        path:'*',
        name:'noFound',
        title:'未找到',
        redirect:{
            name:'home'
        }
    },
    {
        path:'/login',
        name:'login',
        component:Login,
        meta:{
            login:true
        }
    },
    {
        path:'/space',
        name:'space',
        component:Space,
        redirect:{
            name:'works'
        },
        meta:{
            login:true
        },
        children:[
            {
                path:'works',
                name:'works',
                component:MenuList,
                meta:{
                    login:true
                }
            },
            {
                path:'fans',
                name:'fans',
                component:Fans,
                meta:{
                    login:true
                }
            },
            {
                path:'following',
                name:'following',
                component:Fans,
                meta:{
                    login:true
                }
            },
            {
                path:'collection',
                name:'collection',
                component:MenuList,
                meta:{
                    login:true
                }
            }
            
        ]
    }
    
]
});