vue.js路由的基本使用方式

更新时间：2025年01月08日 10:58:45 作者：ordinary90

VueRouter是Vue.js的官方路由插件,用于实现单页应用的页面切换和导航,通过安装、配置路由规则、定义路由组件和使用&lt;router-link>、&lt;router-view>标签

vue.js路由的基本使用

Vue.js 路由（Vue Router）是 Vue.js 官方提供的一个插件，用于实现单页应用（SPA）的路由功能。

它可以帮助我们在 Vue.js 应用中实现页面的切换和导航，以及通过 URL 来控制页面的展示。

在 Vue.js 应用中使用路由，需要先安装 Vue Router。

可以通过npm或者yarn来安装

npm install vue-router
# 或者
yarn add vue-router

安装完成后

在入口文件（一般是 main.js）中引入并使用 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

然后，定义路由组件，即每个页面对应的组件。

可以在单个文件中定义一个组件，也可以使用 Vue 单文件组件。

例如：

<template>
  <h1>About</h1>
</template>

<script>
export default {
  name: 'About'
}
</script>

接下来：

创建一个路由实例，配置路由规则

const routes = [
  { path: '/', component: Home }, // 根路径对应 Home 组件
  { path: '/about', component: About } // /about 路径对应 About 组件
]

const router = new VueRouter({
  routes
})

最后：

在 Vue 根实例中使用路由实例

new Vue({
  router
}).$mount('#app')

至此，路由已经配置完成。

可以在 Vue 组件中使用 <router-link> 和 <router-view> 标签来实现页面切换和展示。

<router-link> 是一个用于导航的链接组件，默认渲染成一个 <a> 标签。

可以通过 to 属性指定链接的地址，也可以通过 tag 属性指定渲染成其他标签。

示例：

<router-link to="/">Home</router-link>
<router-link to="/about" tag="button">About</router-link>

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

它会根据当前路径匹配对应的组件，并将其渲染在当前位置。

示例：

<router-view></router-view>

除了基础的路由规则，Vue Router 还提供了其他的一些高级功能，如动态路由、嵌套路由、路由守卫等。

可以参考 Vue Router 的官方文档来了解更多详细内容。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

如何获取this.$store.dispatch的返回值
这篇文章主要介绍了如何获取this.$store.dispatch的返回值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue3中导入和使用图标库Font Awesome的实现步骤
Font Awesome 是互联网的图标库和工具包,被数百万设计师、开发人员和内容创建者使用,Font Awesome的图标非常丰富,基本涵盖你所需要的所有,本文给大家介绍了Vue3中导入和使用图标库Font Awesome的具体步骤,需要的朋友可以参考下
2025-01-01
使用vant-picker实现自定义内容,根据内容添加图标
这篇文章主要介绍了使用vant-picker实现自定义内容，根据内容添加图标，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
Vue 表情包输入组件的实现代码
这篇文章主要介绍了Vue 表情包输入组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Vue组件引用外部js的实战指南
在Vue.js应用开发中,有时候我们需要在组件内部引入外部JavaScript库或脚本文件来增强组件的功能,本文将详细探讨如何在Vue.js项目中安全有效地引用外部JS文件,并提供一系列示例代码来帮助理解这一过程,需要的朋友可以参考下
2024-09-09
vue2基本响应式实现方式之让数组也变成响应式
这篇文章主要介绍了vue2基本响应式实现方式之让数组也变成响应式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue3中的 $attrs 与 Attributes 继承
这篇文章主要介绍了vue3中的 $attrs 与 Attributes 继承的相关资料,首先介绍了什么是Attributes 继承,结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-02-02
vue中如何禁止input框和textarea编辑
这篇文章主要介绍了vue中如何禁止input框和textarea编辑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue实现轮播图片
这篇文章主要为大家详细介绍了vue实现简单的轮播图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
Vue中使用axios调用后端接口的坑及解决
这篇文章主要介绍了Vue中使用axios调用后端接口的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03