router-link怎么使用

最新推荐文章于 2024-12-10 17:10:00 发布

wujiada001

最新推荐文章于 2024-12-10 17:10:00 发布

阅读量1k

点赞数 9

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_73060959/article/details/141098637

版权

router-link 是 Vue Router 提供的一个组件，用于在 Vue 应用中创建导航链接。当点击 router-link 时，它会根据 to 属性指定的路由地址（或路径名）来导航到对应的页面。这样做的好处是，它可以自动处理 URL 的更新和页面的渲染，而不需要你手动编写 JavaScript 代码来控制这些。

基本用法

在 Vue 文件中，你可以这样使用 router-link：

<template>  
  <div>  
    <!-- 使用字符串 -->  
    <router-link to="/home">Home</router-link>  
  
    <!-- 使用对象 -->  
    <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>  
  
    <!-- 使用 v-bind 绑定表达式 -->  
    <router-link v-bind:to="'/about'">About</router-link>  
  
    <!-- 使用 HTML5 的 history 模式，如果 Vue Router 配置为 history 模式 -->  
    <router-link to="/contact" replace>Contact</router-link>  
  </div>  
</template>  
  
&