router-view和route-link

### Vue.js 中 `router-view` 和 `router-link` 的使用与区别 #### 一、`<router-view>` 的功能与用法 `<router-view>` 是一个内置的组件，用于渲染匹配到的路由对应的组件内容。每当路由发生变化时，`<router-view>` 会动态地加载并展示相应的组件。 - **工作原理** `<router-view>` 组件内部依赖于响应式的 `_route` 数据[^2]。当用户的操作触发了路径的变化（例如点击链接），Vue Router 更新当前的 `$route` 对象，而 `<router-view>` 则根据新的 `$route` 渲染对应的内容。 - **基本语法** ```html <div id="app"> <router-view></router-view> </div> ``` - **实际应用** 在项目中通常只有一个根级的 `<router-view>`，但它也可以嵌套使用以支持子路由的功能。例如，在某个父组件中再次声明 `<router-view>` 来显示其子路由的内容。 --- #### 二、`<router-link>` 的功能与用法 `<router-link>` 是用来定义导航链接的一个自定义标签，类似于 HTML 中的标准 `<a>` 标签，但它的行为更加灵活且适合 SPA 应用程序开发需求。 - **主要属性** - `to`: 定义目标地址，可以是一个字符串形式的 URL 或者对象描述的目标位置。 - `replace`: 如果设置为 true，则不会向历史记录栈中保存新纪录，默认情况下每次跳转会新增一条历史记录。 - `tag`: 自定义生成的 DOM 类型，默认是 `<a>` 链接；如果指定其他值比如 `"li"`，则最终会被渲染成列表项的形式。 - `exact`: 当前激活状态仅适用于完全一致的情况而非部分匹配。 - **基础示例** ```html <!-- 字符串 --> <router-link to="/home">Home</router-link> <!-- 对象 --> <router-link :to="{ path: '/about', query: { user_id: 1 }}">About Us</router-link> <!-- 命名路由 --> <router-link :to="{ name: 'userProfile', params: { userId: 123 }}">User Profile</router-link> ``` - **样式绑定** 默认提供了一个类名为 `.router-link-active` ，表示该链接处于活动状态下自动附加此 CSS class 。可以通过修改配置来自定此类名称。 --- #### 三、两者的对比分析 | 特性 | `<router-view>` | `<router-link>` | |---------------------|----------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------| | 功能定位 | 展现区域，负责呈现由特定路由映射过来的具体页面内容 | 导航工具，帮助开发者轻松构建可交互性的超链接 | | 是否参与用户界面布局 | 占位容器角色，占据一定空间大小 | 不占具体物理尺寸，更多作为逻辑控制手段存在 | | 实际用途举例 | 显示首页、详情页或其他任何需要切换展现效果的部分 | 提供菜单栏选项让用户能够快速到达不同版块 | --- ### 总结 综上所述，虽然两者都属于 vue-router 生态体系下的重要组成部分，但是它们各自承担着截然不同的职责：<br/> - `<router-view>` 主要关注如何正确无误地将正确的组件投射至界面上。<br/> - `<router-link>` 更侧重于引导用户体验流畅无缝衔接各个独立模块之间转换过程的同时保持良好的语义表达能力[^3]。 ```javascript // 示例代码片段 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '/', component: HomeComponent }, { path: '/about', component: AboutComponent } ]; const router = new VueRouter({ mode: 'history', routes }); new Vue({ el: '#app', router, }); ```