目录
Vue Router 官网 安装 | Vue Router
安装和使用Vue Router 3.x
首先，确保你的项目基于Vue 2.x。然后，你可以通过npm安装Vue Router 3.x。
使用npm安装
打开终端，导航到你的Vue项目的根目录，并运行以下命令：
npm install vue-router@3配置Vue Router
安装完成后，你需要在项目中设置Vue Router。
-
创建路由配置文件
在
src目录下创建一个名为router.js（或者任何你喜欢的名字）的新文件，并添加以下代码：import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from './components/Home.vue'; // 根据实际情况调整路径 import About from './components/About.vue'; // 根据实际情况调整路径 Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ]; const router = new VueRouter({ mode: 'history', // 使用HTML5 history模式 base: process.env.BASE_URL, routes }); export default router; -
在Vue实例中使用路由
打开你的
main.js文件，并修改它以引入并使用上面创建的路由配置：import Vue from 'vue'; import App from './App.vue'; import router from './router'; // 引入路由配置 Vue.config.productionTip = false; new Vue({ router, // 将路由注入Vue实例 render: h => h(App) }).$mount('#app');
在组件中使用 <router-view> 和 <router-link>
-
在你的
App.vue或者其他顶级组件中，使用<router-view>来显示匹配的组件。<template> <div id="app"> <router-view></router-view> </div> </template> -
使用
<router-link>来创建导航链接：<router-link to="/">Home</router-link> <router-link to="/about">About</router-link>
完成以上步骤后，你就成功地在Vue 2.x项目中集成了Vue Router 3.x。现在，你可以根据定义的路由规则，在不同的组件之间进行导航了。
扩展:渲染多个视图
在Vue Router中，命名视图允许你在同一时间渲染多个视图，而不是单一的主视图。这对于需要在一个页面布局中显示多个不同组件（例如一个头部、一个侧边栏和一个主要内容区域）的应用来说非常有用。
使用命名视图
-
定义路由配置
在你的路由配置中，为不同的视图指定名字。这通过
components选项来完成（注意这里是复数形式components），它接受一个对象，键是视图的名字，值是你想要在这个位置渲染的组件。const routes = [ { path: '/', components: { default: Home, header: HeaderComponent, sidebar: SidebarComponent } }, { path: '/about', components: { default: About, header: HeaderComponent, sidebar: SidebarComponent } } ]; -
在模板中使用命名视图
接下来，在你的Vue组件模板中使用
<router-view>标签，并通过name属性来匹配相应的组件。<template> <div id="app"> <!-- 头部视图 --> <router-view name="header"></router-view> <!-- 侧边栏视图 --> <router-view name="sidebar"></router-view> <!-- 默认视图 --> <router-view></router-view> </div> </template>注意，未命名的
<router-view>会匹配默认的视图，即上面路由配置中的default。
实际应用案例
假设你正在构建一个博客网站，你可能希望在每个页面上都有一个固定的顶部导航条和一个侧边栏，而内容部分则是根据用户导航变化的部分。
HeaderComponent：顶部导航条。SidebarComponent：侧边栏，包含最近的文章列表或其他链接。Home和About：主要内容区域的组件。
通过使用命名视图，你可以确保无论用户导航到哪个页面，顶部导航条和侧边栏都保持不变，只有主要内容区域发生变化。
注意事项
- 每个命名视图在对应的路由配置中都需要有相应的组件定义。如果某个视图没有匹配的组件，则不会显示任何内容。
- 使用命名视图可以帮助你创建更灵活的布局，但也要小心不要过度复杂化你的应用结构。保持代码简洁明了是非常重要的。
通过这种方式，命名视图提供了一种强大的方法来组织和展示你的应用的不同部分，使得单页应用程序（SPA）的设计更加模块化和可维护。
<router-view> 在二级页面（即嵌套路由）中使用
假设我们构建一个简单的后台管理系统，包含以下页面结构：
- 主页
/ - 用户管理
/users- 用户列表
/users（作为默认子页面） - 用户详情
/users/123
- 用户列表
这里，“用户管理”是一级页面，“用户列表”和“用户详情”是它的二级页面。
1. 路由配置（router/index.js）
import { createRouter, createWebHistory } from 'vue-router';
// 引入组件
import Home from '../views/Home.vue';
import Users from '../views/Users.vue';
import UserList from '../views/UserList.vue';
import UserDetails from '../views/UserDetails.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/users',
name: 'Users',
component: Users,
children: [
// 默认子路由：访问 /users 时显示 UserList
{
path: '', // 空路径，匹配 /users
name: 'UserList',
component: UserList,
},
// 动态子路由：显示具体用户详情
{
path: ':id', // 比如 /users/123
name: 'UserDetails',
component: UserDetails,
},
],
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;2. 一级页面组件：Users.vue（容器组件）
这是“用户管理”这个一级页面的布局组件，它内部使用 <router-view> 来渲染二级页面。
<!-- views/Users.vue -->
<template>
<div class="users-container">
<h1>用户管理系统</h1>
<p>这里是用户管理的一级页面，下面显示二级页面内容：</p>
<!-- 二级页面将在这里被渲染 -->
<router-view />
</div>
</template>
<script>
export default {
name: 'Users',
created() {
console.log('Users 组件已加载');
},
};
</script>
<style scoped>
.users-container {
padding: 20px;
border: 1px solid #ddd;
margin: 10px;
}
</style> 3. 二级页面组件：UserList.vue
<!-- views/UserList.vue -->
<template>
<div class="user-list">
<h2>用户列表</h2>
<ul>
<li v-for="user in users" :key="user.id">
<router-link :to="`/users/${user.id}`">
{{ user.name }}
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'UserList',
data() {
return {
users: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
],
};
},
};
</script> 4. 二级页面组件：UserDetails.vue
<!-- views/UserDetails.vue -->
<template>
<div class="user-details">
<h2>用户详情</h2>
<p>当前用户 ID：{{ $route.params.id }}</p>
<p>姓名：用户{{ $route.params.id }}</p>
<router-link to="/users">返回用户列表</router-link>
</div>
</template>
<script>
export default {
name: 'UserDetails',
watch: {
// 当路由参数变化时（如从 /users/1 切换到 /users/2），更新数据
'$route'(to) {
console.log('用户ID变化为:', to.params.id);
// 可在此处发起API请求加载新用户数据
},
},
};
</script>5. 使用方式（在 App.vue 中）
<!-- App.vue -->
<template>
<div id="app">
<nav>
<router-link to="/">首页</router-link> |
<router-link to="/users">用户管理</router-link>
</nav>
<!-- 一级页面在这里渲染 -->
<router-view />
</div>
</template>分析：<router-view> 在二级页面中的作用
| 项目 | 说明 |
|---|---|
| 层级结构 | App.vue 中的 <router-view> 渲染一级页面（如 Home 或 Users）；Users.vue 中的 <router-view> 渲染二级页面（如 UserList 或 UserDetails）。 |
| 嵌套路由 | 通过 children 配置，Vue Router 知道 /users/123 是 /users 的子路由，因此先加载 Users 组件，再将其 <router-view> 替换为 UserDetails。 |
| 组件复用 | 访问 /users 和 /users/123 时，Users.vue 组件不会重新创建，提高了性能。 |
| 数据共享 | Users.vue 可以作为布局容器，存放公共逻辑（如权限检查、加载用户总数等），而子组件只关注具体内容。 |
| 路径匹配 | 子路由路径是相对的。path: '' 匹配 /users，path: ':id' 匹配 /users/123。 |
总结
<router-view>是 动态内容的占位符。- 在一级页面组件中使用
<router-view>，可以实现 二级页面的嵌套显示。 - 嵌套路由非常适合构建具有 固定布局 + 可变内容 的页面结构（如后台管理、文档网站等）。
- 正确使用嵌套路由和
<router-view>，可以让项目结构更清晰、组件复用性更高、用户体验更流畅。
💡 提示：你可以继续嵌套更多层级（三级、四级），但建议不要超过三层，以免结构过于复杂。
扫一扫
826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
