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 的官方文档来了解更多详细内容。

总结

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

您可能感兴趣的文章:

vue中v-for和v-if不能在同一个标签使用的最新解决方案
这篇文章主要介绍了vue中v-for和v-if不能在同一个标签的最新解决方案,这里描述了两种解决方案，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-07-07
Element实现表格嵌套、多个表格共用一个表头的方法
这篇文章主要介绍了Element实现表格嵌套、多个表格共用一个表头的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
基于vue-cli3创建libs库的实现方法
这篇文章主要介绍了基于vue-cli3创建libs库的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
vue使用socket与服务端进行通信的代码详解
这篇文章主要给大家介绍了vue如何使用socket与服务端进行通信的相关资料,在Vue中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下
2023-09-09
Vue的条件判断问题及说明
文章主要介绍了Vue中的v-if、v-else-if和v-else的等这三种指令的使用方法和场景,还对比了v-if和v-show的区别,并提供了实际开发中选择v-if或v-show的的建议
2026-05-05
Vue实现列表跑马灯效果
这篇文章主要为大家详细介绍了Vue实现列表跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
基于Vue实现本地消息队列MQ的示例详解
这篇文章为大家详细主要介绍了如何基于Vue实现本地消息队列MQ, 让消息延迟消费或者做缓存,文中的示例代码讲解详细,需要的可以参考一下
2024-02-02
八种vue实现组建通信的方式
这篇文章主要介绍是八种vue实现组建通信的方式，包括、props 父组件与子组件通信、$emit 子组件父组件传递、$emit与props结合兄弟组件传值等等，想具体了解的朋友可以参考下面文章的具体内容
2021-09-09
Vue实现预览docx/xlsx/pdf等类型文件功能
这篇文章主要介绍了如何在Vue中实现docx/xlsx/pdf等类型文件预览功能,在实现过程中，需要注意文件的格式和转换方式，以及插件和组件的使用方法和注意事项，需要的朋友可以参考下
2023-05-05
Vue3实现刷新页面局部内容的示例代码
本文主要介绍了Vue3实现刷新页面局部内容的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07