使用 Vue Router 实现嵌套路由

在构建大型Vue.js应用时，嵌套路由是一项必备技术。本文将详细介绍如何在Vue.js项目中使用Vue Router实现嵌套路由，并附上一个详细案例。

一、安装 Vue Router

首先，在你的Vue项目中安装Vue Router。如果你还没有初始化一个Vue项目，可以使用Vue CLI来创建一个：

vue create my-vue-app

进入项目目录后，安装Vue Router：

npm install vue-router

二、配置路由

在你的项目中创建一个router/index.js文件，并在其中配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
import User from '@/components/User.vue';
import UserProfile from '@/components/UserProfile.vue';
import UserPosts from '@/components/UserPosts.vue';

Vue.use(Router);

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/user',
        component: User,
        children: [
            {
                path: 'profile',
                component: UserProfile
            },
            {
                path: 'posts',
                component: UserPosts
            },
            {
                path: '', // 默认子路由
                redirect: 'profile'
            }
        ]
    }
];

const router = new Router({
    mode: 'history',
    routes
});

export default router;

        

三、使用路由

在你的主文件main.js中导入并使用router：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

        

四、创建组件

接下来，创建你的组件文件：

• src/components/Home.vue
• src/components/About.vue
• src/components/User.vue
• src/components/UserProfile.vue
• src/components/UserPosts.vue

例如，User.vue可能包含以下代码：

  

    
User
    
  



export default {
  name: 'User'
};

        
        

五、运行应用

现在，你可以启动你的Vue应用并测试嵌套路由：

npm run serve

访问http://localhost:8080/user/profile和http://localhost:8080/user/posts，你会看到不同的内容。

总结

通过本文，你已经学会了如何在Vue.js项目中使用Vue Router实现嵌套路由。嵌套路由对于构建复杂的单页应用非常有用，希望本文对你有所帮助。