当前位置: 首页 > article >正文

VueRouter引入步骤

一、安装VueRouter

  • 如果你使用的是npm,可以通过以下命令安装VueRouter:
npm install vue-router@4  # 安装VueRouter 4.x版本,适用于Vue 3.x  
npm install vue-router@3  # 安装VueRouter 3.x版本,适用于Vue 2.x

二、配置VueRouter

1、创建路由配置

在项目的src目录下创建一个router文件夹,并在其中创建一个index.js文件。

在index.js文件中,导入Vue和VueRouter,并使用Vue.use(VueRouter)来安装VueRouter插件(对于Vue 3,需要使用createRouter和createWebHistory或createMemoryHistory来创建路由实例)。

定义一个路由配置对象,该对象包含一个routes数组,数组中的每个元素都是一个路由规则对象,包含path(路径)和component(组件)等属性。

创建VueRouter实例

根据Vue的版本和VueRouter的版本,创建VueRouter实例的方式可能有所不同。

对于Vue 2和VueRouter 3,可以使用new VueRouter({...})来创建实例。

对于Vue 3和VueRouter 4,需要使用createRouter函数来创建实例,并传入路由配置对象和路由历史记录类型(如createWebHistory())。

将VueRouter实例挂载到Vue实例

在main.js文件中,导入Vue、App组件以及刚刚创建的VueRouter实例。

创建一个新的Vue实例,并通过router选项将VueRouter实例挂载到Vue实例上。

最后,使用$mount('#app')将Vue实例挂载到DOM中的#app元素上。

三、使用VueRouter

在组件中使用<router-link>和<router-view>

<router-link>用于创建导航链接,它会被渲染成一个<a>标签,但点击时不会重新加载页面,而是导航到指定的路由。

<router-view>是一个占位符,用于渲染匹配到的路由组件。

通过以上步骤,你就可以在Vue项目中成功引入并使用VueRouter了。这将使你的应用能够根据不同的URL来渲染不同的组件,从而实现单页面应用的路由功能。


http://www.kler.cn/a/373035.html

相关文章:

  • Oracle视频基础1.1.4练习
  • Go使用SIMD指令——以string转为整数为例
  • 基于SSM学生竞赛模拟系统的设计
  • 第二十章 Vue组件通信之父子通信
  • pycharm与anaconda下的pyside6的安装记录
  • 视频去水印软件推荐:6款去水印工具值得一试
  • QT——记事本项目
  • QT 实现自定义开机加载动画一
  • 网络准入控制
  • QNAP威联通NAS第三方动态域名解析之docker部署DDNS GO
  • CPU算法分析LiteAIServer视频智能分析平台噪声检测功能在视频监控中的应用与优势
  • 图像处理 -- 白平衡处理简介
  • 企业物流管理数据仓库建设的全面指南
  • 在 Ubuntu 22.04 LTS 上安装 NVM (Node Version Manager) 管理和切换不同版本的 Node.js npm
  • 聚焦汽车智能化与电动化︱AUTO TECH 2025 华南展,以展带会,已全面启动,与您相约11月广州!
  • Linux 服务器中完整导出MySQL的某个库
  • PHP + Windows小皮面板 + VScode 安装教程
  • 【Linux】安装并配置 Microsoft SQL Server 数据库(Ubuntu 22.04)
  • commitlint+lint-staged+husky
  • 在线UI设计工具:创意与效率的结合
  • sheng的学习笔记-AI基础-激活函数
  • 大模型流水线并行和量化学习资料
  • 第12次CCF CSP认证真题解
  • iOS MPNowPlayingInfoCenter 通知栏、锁屏 显示当前播放的媒体信息
  • git修改用户名与查看git的账号与密码
  • WPF中设置DataGrid的常用样式