router-link详解

### Vue.js 中 `router-link` 的详细用法和功能 `router-link` 是 Vue Router 提供的一个核心组件，用于在 Vue 应用中创建导航链接。它类似于 HTML 中的 `<a>` 标签，但提供了更多功能以支持单页应用（SPA）的路由切换[^1]。 #### 1. 基本功能 `router-link` 的主要功能是生成一个超链接，当用户点击时会触发路由跳转，而不会刷新整个页面。默认情况下，`router-link` 会渲染为 `<a>` 标签，并将目标路径作为 `href` 属性值[^2]。 ```html <router-link to="/">Home</router-link> ``` 上述代码会生成以下 HTML： ```html <a href="/">Home</a> ``` #### 2. 动态路由跳转 除了静态路径外，`to` 属性还可以接受一个对象或计算属性，从而实现动态路由跳转。 - **对象形式**：通过对象指定路径、查询参数等。 ```html <router-link :to="{ path: '/user', query: { id: 123 } }">User</router-link> ``` 生成的链接可能如下： ```html <a href="/user?id=123">User</a> ``` - **命名路由**：如果定义了命名路由，可以使用 `name` 属性进行跳转。 ```html <router-link :to="{ name: 'user', params: { userId: 123 } }">User</router-link> ``` #### 3. 激活类名 Vue Router 会自动为当前活动的 `router-link` 添加一个类名，默认为 `router-link-active`。如果需要更精确的匹配规则，可以使用 `exact` 属性[^3]。 - **默认行为**：当父路径与子路径部分匹配时，父路径也会被标记为激活状态。 ```html <router-link to="/user">USER</router-link> <router-link to="/user/userinfo">USER-info</router-link> ``` 在这种情况下，当路由为 `/user/userinfo` 时，`/user` 的链接也会被标记为激活状态。 - **严格匹配**：通过设置 `exact` 属性，确保只有完全匹配时才添加激活类名。 ```html <router-link to="/user" exact>USER</router-link> ``` #### 4. 自定义标签 `router-link` 默认渲染为 `<a>` 标签，但可以通过 `tag` 属性自定义其渲染的 HTML 元素。 ```html <router-link to="/" tag="button">Home</router-link> ``` 上述代码会生成一个按钮而不是超链接： ```html <button>Home</button> ``` #### 5. 替代方法 如果需要手动控制路由跳转，也可以使用编程式导航替代 `router-link`。 ```javascript this.$router.push({ path: '/user' }); ``` #### 示例代码 以下是一个完整的示例，展示如何结合 `router-link` 和路由配置使用： ```html <div id="app"> <ul> <li><router-link to="/" exact>Home</router-link></li> <li><router-link to="/user">User</router-link></li> <li><router-link to="/user/userinfo">User Info</router-link></li> </ul> <router-view></router-view> </div> <script> import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const Home = { template: '<div>Home Page</div>' }; const User = { template: '<div>User Page</div>' }; const UserInfo = { template: '<div>User Info Page</div>' }; const routes = [ { path: '/', component: Home }, { path: '/user', component: User }, { path: '/user/userinfo', component: UserInfo } ]; const router = new VueRouter({ routes }); new Vue({ el: '#app', router }); </script> ``` ### 注意事项 - 如果需要对路由跳转进行拦截或验证，可以结合导航守卫（如 `beforeEach` 或 `beforeRouteEnter`）实现。 - 在复杂场景下，建议优先使用编程式导航，以便更好地控制逻辑。