Vue 3 30天精进之旅：Day 07 - Vue Router

引言

在前几天的学习中，我们深入探讨了Vue的表单输入绑定及其处理机制。今天，我们将学习Vue Router，这是Vue.js官方提供的路由管理器，用于构建单页面应用（SPA）。通过使用Vue Router，你可以轻松地实现页面之间的切换，管理URL并保持应用的状态。

1. 什么是Vue Router？

Vue Router是Vue.js的官方路由管理器，它用于在单页面应用中实现路由功能。通过Vue Router，你可以定义不同的路由，每个路由对应一个组件，使得用户能够在不重新加载页面的情况下浏览不同的视图。

2. 安装和配置Vue Router

首先，我们需要在我们的Vue项目中安装Vue Router。以下是安装和基本配置的步骤：

2.1 安装Vue Router

在项目根目录下运行以下命令：

npm install vue-router@4

2.2 创建路由配置

在src目录下创建一个名为router的文件夹，并在该文件夹中创建一个名为index.js的文件。然后在index.js中定义路由配置：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{path: '/',name: 'Home',component: Home,},{path: '/about',name: 'About',component: About,},
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

3. 创建视图组件

在src/views目录下创建两个新文件：Home.vue和About.vue。

3.1 Home.vue

<template><div><h1>首页</h1><p>欢迎来到我们的应用！</p></div>
</template><script>
export default {name: 'Home',
};
</script><style scoped>
h1 {color: #42b983;
}
</style>

3.2 About.vue

<template><div><h1>关于我们</h1><p>这是一个关于我们的应用的页面。</p></div>
</template><script>
export default {name: 'About',
};
</script><style scoped>
h1 {color: #42b983;
}
</style>

4. 在主应用中使用Vue Router

接下来，我们需要在src/main.js文件中引入并使用Vue Router。修改src/main.js如下：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index.js'; // 引入路由配置createApp(App).use(router) // 使用路由.mount('#app');

5. 添加路由链接

为了在不同的路由之间进行导航，我们可以使用<router-link>组件。修改src/App.vue如下：

<template><div id="app"><nav><router-link to="/">首页</router-link><router-link to="/about">关于</router-link></nav><router-view></router-view> <!-- 渲染匹配的组件 --></div>
</template><script>
export default {name: 'App',
};
</script><style>
nav {margin-bottom: 20px;
}router-link {margin-right: 10px;
}
</style>

在这个示例中，<router-link>用来创建导航链接，而<router-view>用以渲染匹配的视图组件。

6. 路由的嵌套和动态路由

6.1 嵌套路由

你可以创建嵌套路由，以便在一个视图中显示多个层级的组件。下面是如何创建嵌套路由的示例。首先，在src/views目录下创建一个名为User.vue的组件：

<template><div><h1>用户页面</h1><router-link to="profile">查看个人资料</router-link><router-link to="settings">设置</router-link><router-view></router-view> <!-- 渲染嵌套的路由组件 --></div>
</template><script>
export default {name: 'User',
};
</script>

然后，创建两个新组件：Profile.vue和Settings.vue，并在router/index.js中配置嵌套路由：

import Profile from '../views/Profile.vue';
import Settings from '../views/Settings.vue';// 在routes数组中添加User路由
const routes = [// 之前的路由...{path: '/user',name: 'User',component: User,children: [{path: 'profile',name: 'Profile',component: Profile,},{path: 'settings',name: 'Settings',component: Settings,},],},
];

7. 处理路由参数

你可以在路由中定义动态参数，以便在URL中传递信息。例如，如果你想创建一个用户详情页面，可以创建一个动态路由：

{path: '/user/:id',name: 'UserDetail',component: UserDetail,
}

然后在UserDetail组件中，你可以通过this.$route.params.id访问该参数。

8. 实践：构建一个简单的导航应用

为了巩固今天的学习，我们将构建一个简单的导航应用，用户可以在首页和关于页面之间切换，以及访问用户页面。

<template><div id="app"><nav><router-link to="/">首页</router-link><router-link to="/about">关于</router-link><router-link to="/user">用户</router-link></nav><router-view></router-view></div>
</template><script>
export default {name: 'App',
};
</script><style>
nav {margin-bottom: 20px;
}
</style>

在router/index.js中，添加新的路由和组件。

9. 总结

今天我们深入学习了Vue Router的基本概念与用法，包括如何安装和配置路由、创建路由链接、嵌套路由及动态路由参数。通过构建简单的导航应用，我们巩固了对路由管理的理解，并为构建更复杂的单页面应用打下了基础。