脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue Router引入

Vue Router的介绍与引入功能详解

 更新时间：2024年01月02日 16:14:31   作者：城堡修炼者  
Vue Router 是 Vue.js 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,这篇文章主要介绍了Vue Router的介绍与引入,需要的朋友可以参考下

在这里是记录我引入Vue Router的全过程，引入方面也最好先看官方文档

一.介绍

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

说大白话点就是它帮助你根据不同的 url 来展示不同的页面（组件），不用自己写 if / else路由配置影响整个项目，所以建议单独用config目录、单独的配置文件去集中定义和管理。

二.实操

安装：

npm install vue-router@4

yarn add vue-router@4

JavaScript：

main.ts：

import * as VueRouter from 'vue-router';
import routes from "./config/router";
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

router文件夹下的router.ts内容：

// 1. 定义路由组件.
// 也可以从其他文件导入
import Index from '../pages/index.vue';
import Team from '../pages/Team.vue';
import User from '../pages/User.vue';
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Index },
  { path: '/team', component: Team },
  { path: '/user', component: User },
]
export default routes;

到此这篇关于Vue Router的介绍与引入的文章就介绍到这了,更多相关Vue Router引入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 基于vue-cli3多页面开发apicloud应用的教程详解

    基于vue-cli3多页面开发apicloud应用的教程详解

    这篇文章主要介绍了基于vue-cli3多页面开发apicloud应用，本文采用vue-cli+APIcloud的方式写解决以上痛点，开发灵活，并且打包之后体积更小速度更快,需要的朋友可以参考下
    2019-06-06
  • vue+elementUI 实现内容区域高度自适应的示例

    vue+elementUI 实现内容区域高度自适应的示例

    这篇文章主要介绍了vue+elementUI 实现内容区域高度自适应的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
    2020-09-09
  • Vue实现无限轮播效果时动态绑定style失效的解决方法

    Vue实现无限轮播效果时动态绑定style失效的解决方法

    最近在开发中遇到了一个新需求：列表轮播滚动,实现方式也有很多,比如使用第三方插件,但是由于不想依赖第三方插件,想自己实现,于是我开始了尝试,但是在这个过程中遇到了动态绑定style样式不生效,所以本文介绍了Vue实现无限轮播效果时动态绑定style失效的解决方法
    2024-08-08
  • 解决vue3报错:Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)

    解决vue3报错:Unexpected mutation of “xxx“ prop.(eslintvue/no

    这篇文章主要给大家介绍了关于如何解决vue3报错:Unexpected mutation of “xxx“ prop.(eslintvue/no-mutating-props)的相关资料,文中通过代码将解决办法介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue与iframe之间的交互方式(一看就会)

    vue与iframe之间的交互方式(一看就会)

    这篇文章主要介绍了vue与iframe之间的交互方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue axios整合使用全攻略

    vue axios整合使用全攻略

    这篇文章主要介绍了vue axios整合使用全攻略,需要的朋友可以参考下
    2018-05-05
  • Vue中使用富文本编辑框的实践与探索

    Vue中使用富文本编辑框的实践与探索

    本文详细介绍了如何在Vue项目中集成和使用富文本编辑框,并分享了一些实践经验,介绍了为什么需要富文本编辑框,Vue中常用的富文本编辑器,以及如何安装、配置和使用Vue-Quill-Editor,本文还提供了一些基本的配置示例,帮助开发者在实际项目中根据需求进行更多探索和定制
    2024-10-10
  • vue进行post和get请求实例讲解

    vue进行post和get请求实例讲解

    这篇文章主要介绍了vue进行post和get请求实例讲解，违章围绕post和get请求的相关资料展开详细内容，具有一的的参考价值，需要的小伙伴可以参考一下
    2022-03-03
  • 详解vue中配置代理(解决跨域请求)

    详解vue中配置代理(解决跨域请求)

    这篇文章主要为大家详细介绍了vue如何通过配置代理来解决跨域请求的问题，文中的示例代码讲解详细，对我们深入学习vue有一定的帮助，感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • 详解vue页面状态持久化详解

    详解vue页面状态持久化详解

    这篇文章主要为大家介绍了vue页面状态持久化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12

最新评论