###
Vue Router-View 组件用于页面跳转
在单页应用(SPA)模式下，`<
router-view>` 是一个非常重要的组件，它负责
渲染匹配当前路由的视图[^1]。
#### `<
router-link>` 和 `<
router-view>` 的协同工作
为了实现页面之间的平滑切换而
不重新加载整个网页，
Vue 提供了两个核心概念：一个是导航链接(`<
router-link>`)，另一个则是视图容器(`<
router-view>`)。当点击带有 `to` 属性的 `<
router-link>` 标签时，会触发 URL 地址的变化；而这个变化会被
Vue Router 捕获并更新对应的路径下的组件展示于 `<
router-view>` 内部[^2]。
下面是一个简单的例子来说明如何配置以及使用这两个元素：
```html
<!
-- navbar
.vue -->
<template>
<div class="navbar">
<!
-- 定义三个
不同的菜单项，分别指向
不同URL
-->
<ul id="main">
<li><
router-link to="/food">商品</
router-link></li>
<li><
router-link to="/rating">评价</
router-link></li>
<li><
router-link to="/seller">商家</
router-link></li>
</ul>
<!
-- 动态加载对应路由所映射的内容
-->
<
router-view></
router-view>
</div>
</template>
```
在这个模板里，每当用户选择了某个选项卡（即点击了一个 `<
router-link>`），浏览器地址栏中的 URL 就会发生改变，并且相应的组件会在 `<
router-view>` 占位符处被呈现出来。
#### 配置路由规则
为了让上述代码正常运作，还需要定义好路由表，告诉应用程序各个路径应该关联哪个具体的组件。这通常是在项目的入口文件或者专门创建的一个 JavaScript 文件中完成的。例如：
```javascript
// main
.js 或者
router/index
.js
import { create
Router, createWebHistory } from '
vue-router'
import FoodComponent from '
./components/FoodComponent
.vue' // 假设这是商品页面组件
import RatingComponent from '
./components/RatingComponent
.vue' // 评价页面组件
import SellerComponent from '
./components/SellerComponent
.vue' // 商家详情页面组件
const routes = [
{
path: '/food',
component: FoodComponent,
},
{
path: '/rating',
component: RatingComponent,
},
{
path: '/seller',
component: SellerComponent,
}
]
const
router = create
Router({
history: createWebHistory(),
routes
})
export default
router;
```
这段脚本设置了三条基本路线，每条都指定了特定的 URL 路径及其相对应要显示出来的
Vue 组件。
扫一扫
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
