10分钟快速上手VueRouter4.x教程

目录
  • 写在前面
  • URL.hash与History
  • 安装与使用流程
  • router-link和router-view
    • router-link
    • router-view
  • 路由懒加载
  • 动态路由
    • 匹配所有路由
  • 路由嵌套
  • 写在最后

写在前面

Vue Router是Vue团队的研发的一款与Vue.js核心深度集成的一款路由插件,使Vue构建单页面程序变得非常的简单;Vue Router目前最新版本是4.X,也是Vue3推荐使用的版本,这篇文章我们就来学习一下Vue Router4.X。

URL.hash与History

Vue Router中存在两种history(记录历史路由),分别是URL.hash和HTML5中提供的History两种。

hash历史记录对于没有主机的Web应用程序(例如file://),或当配置服务器不能处理任意的URL时非常有用,但是hash的SEO非常差劲;

History历史是HTML5中新增的,对于IE来说不是很友好,但是Vue3都放弃IE了,你也就不用考虑IE了;这种方式是目前最常见的一种方式,但是应用程序必须通过http协议被提供服务。

安装与使用流程

首先我们安装Vue Router,命令如下:

npm i vue-router

然后在main.js中写入如下代码:

import { createApp } from 'vue'
import App from './App.vue'
// 1 引入 createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 2 定义路由映射表
const routes = [
  /* more router */
]
// 3 创建路由实例,并传递对应配置
const router = createRouter({
  // history 模式 这里使用createWebHistory
  history: createWebHistory(),
  // 传递路由映射表
  routes
})
createApp(App).use(router).mount('#app')

上面的代码中的routes如果多的话,可以定义一个router.js文件,将其进行抽离,示例代码如下:

router.js

export default [
  /* more router */
]

main.js

import { createApp } from 'vue'
import App from './App.vue'
// 2 引入路由映射表
import routes from './router'

// 1 引入 createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 3 创建路由实例,并传递对应配置
const router = createRouter({
  // history 模式 这里使用createWebHistory
  history: createWebHistory(),
  // 传递路由映射表
  routes
})
createApp(App).use(router).mount('#app')

或者**直接在****router.js中直接导出一个路由实例,在main.js**中使用即可(这种方式更常用)。

router-link和router-view

router-link

<router-link>是Vue提供的自定义组件,用于创建链接,在Vue中并没有使用原生的<a>,因为<a>改变URL后会重新加载页面而<router-link>不会;关于<router-link>组件的细节支持哪些属性,可以参考文档

router-view

<router-view>组件用于与URL对应的组件,例如下面这段代码:

<template>
  <router-link to="/hello"
    ><img alt="Vue logo" src="./assets/logo.png"
  /></router-link>
  <router-view></router-view>
</template>

然后我们的router.js的代码如下:

import RootComponent from './components/root.vue'
export default [
  {
    path: '/',
    // 引入组件
    component: RootComponent
  },
  {
    path: '/hello',
    // 路由懒加载引入组件
    component: () => import('./components/HelloWorld.vue')
  }
]

关于其他配置项,可以参考文档

代码运行结果如下所示:

路由懒加载

当我们的应用越来越大时,打包后的JavaScript代码也会特别的大,这个时候需要我们将整个应用拆分为不同的块,而Vue Router就支持这个功能,我们只需要使用动态导入替换静态导入即可,就比如上面那段代码:

component: () => import('./components/HelloWorld.vue')

然后打包(webpack、Vite)工具就会将这些动态导入的组件单独打包,如下图所示:

动态路由

VueRouter允许我们动态的去设置路由匹配规则,例如我们现在有一个User组件,组件的内容会根据不同的ID展示不同的内容,设置方法只需要通过:参数名的形式去设置即可。

例如:

{
  path: '/user/:id',
  component: () => import('@/components/User')
}

在模板中跳转如下:

<router-link to="/user/10010"></router-link>

或者通过useRouter这个hook提供的push方法,例如:

import { useRouter } from 'vue-router'
const {push} = useRouter()
push({
  path: '/user',
  params: { id: 10010 }
})
// 或者
let id = 10010
push('/user/' + id)

获取路由地址可以通过useRoute这个hook,用法与useRouter一致。

匹配所有路由

VueRouter的动态路由允许我们匹配哪些没有匹配到的路由,示例代码如下:

{
  path: '/:pathMatch(.*)',
  component: () => import('./components/Page404.vue'),
},

当前面的路由匹配未成功时,就会匹配这个路由。

路由嵌套

现在我们有一个需求,就是在HelloWorld组件下存两个组件,需要切换着两个组件。

这个时候路由嵌套的就发挥作用了,其实路由嵌套比较简单,就是通过路由配置中的一个children属性来实现,示例代码如下:

HelloWorld.vue

<template>
  <h1>Hello World</h1>
  <div
    style="
      display: flex;
      justify-content: space-between;
      width: 240px;
      margin: 0 auto;
    "
  >
    <router-link to="about">about</router-link>
    <router-link to="user">user</router-link>
  </div>
  <router-view></router-view>
</template>

router.js

{
  path: '/hello',
  // 路由懒加载引入组件
  component: () => import('./components/HelloWorld.vue'),
  children: [
    {
      path: 'about',
      component: () => import('./components/about.vue'),
    },
    {
      path: 'user',
      component: () => import('./components/user.vue'),
    },
  ],
},

子组件比较简单,只有一个<h1>标签,最终效果如下:

写在最后

到此这篇关于10分钟快速上手VueRouter4.x教程的文章就介绍到这了,更多相关VueRouter4.x入门内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue路由vue-router用法讲解

    目录 一.vue-router 1.简介 2.使用流程 二.基本路由实现 三.嵌套路由 四.缓存路由组件 1.为什么使用 2.如何使用 3.完整代码 五.传递参数 1.通过url传递(param传递) 2.通过query传递 3.通过param传递 六.$route 与 $router 的区别 1.$route 2.$router 3.跳转路由的三种形式 一.vue-router 1.简介 (1)SPA:Single Page Application(单页应用),简单理解就是只有一个web页面的

  • vue-router 学习快速入门

    vue-router 快速入门 配置路由 $ npm install vue-router --save routes.js import Home from './pages/Home.vue' import Gifs from './pages/Gifs.vue' import User from './pages/User.vue' export const routes = [ { path: '', component: Home }, { path: '/gifs', compone

  • vue-router:嵌套路由的使用方法

    模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

  • Vue学习笔记进阶篇之vue-router安装及使用方法

    介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文是基于上一篇文章(Vue学习笔记进阶篇--vue-cli安装及介绍)vue-cli脚手架工具的. 安装 在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • Vue学习-VueRouter路由基础

    目录 一.VueRouter 1.说明 2.选中路由的渲染: 3.基本工作原理 二.实战 1.创建一个带router的vue项目 2.打开项目中的src/router/index.js文件 3.在浏览器中打开项目 4.新建路由 一.VueRouter 1.说明 用 Vue.js + Vue Router 创建单页应用,感觉很自然:使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (

  • 10分钟快速上手VueRouter4.x教程

    目录 写在前面 URL.hash与History 安装与使用流程 router-link和router-view router-link router-view 路由懒加载 动态路由 匹配所有路由 路由嵌套 写在最后 写在前面 Vue Router是Vue团队的研发的一款与Vue.js核心深度集成的一款路由插件,使Vue构建单页面程序变得非常的简单:Vue Router目前最新版本是4.X,也是Vue3推荐使用的版本,这篇文章我们就来学习一下Vue Router4.X. URL.hash与His

  • 10 分钟快速入门 Python3的教程

    Python 是由吉多·范罗苏姆(Guido Van Rossum)在 90 年代早期设计. 它是如今最常用的编程语言之一.它的语法简洁且优美,几乎就是可执行的伪代码. 欢迎大家斧正.英文版原作 Louie Dinh @louiedinh 邮箱 louiedinh [at] [谷歌的信箱服务].中文翻译 Geoff Liu. 注意:这篇教程是基于 Python 3 写的.如果你想学旧版 Python 2,我们特别有另一篇教程. # 用井字符开头的是单行注释 """ 多行字符串

  • Playwright快速上手指南(入门教程)

    目录 1. 为什么选择Playwright 1.1 Playwright的优势 1.2 已知局限性 2. Playwright使用 2.1 安装 2.2 自动录制 2.3 定制化编写 2.4 网络拦截(Mock接口),示例如下: 2.6 异步执行,示例如下: 2.7 Pytest结合,示例如下: 2.8 移动端操作,示例如下: 3. 总结 Playwright是由微软公司2020年初发布的新一代自动化测试工具,相较于目前最常用的Selenium,它仅用一个API即可自动执行Chromium.Fi

  • Python+ChatGPT实现5分钟快速上手编程

    目录 1.chatGPT是个啥 2.chatGPT怎么注册 3.chatGPT怎么用 4.小结 最近一段时间chatGPT火爆出圈!无论是在互联网行业,还是其他各行业都赚足了话题. 俗话说:“外行看笑话,内行看门道”,今天从chatGPT个人体验感受以及如何用的角度来分享一下. 1.chatGPT是个啥 chatGPT是最近新出来的玩意?并不是!在国内,chatGPT最早是在2022年11月就由OpenAI于推出的.只是去年底火了一把,后力不足又遇春节,热度草草就结束了. 先讲一下,OpenAI

  • 5分钟快速上手Spring Boot

    概述 与一些动态语言(如Ruby.Groovy.Node.js)相比,Java开发显得异常笨重.接触过外包项目的朋友也有所了解,如果要开发一个小型项目,首选的编程语言并不是Java,而是PHP.为什么呢?因为开发起来快!目前很多大型互联网公司的早起编程语言都是类似PHP这种能够快速开发的语言. 既然问题出现了,那必然有解决问题的方案,SpringBoot做到了.SpringBoot是由Pivotal公司所属团队研发,该公司的企业宗旨为: 致力于"改变世界构造软件的方式(We are transf

  • Vue.js 60分钟快速入门教程

    vuejs是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 当

  • 让你30分钟快速掌握vue3教程

    经过了漫长的迭代,Vue 3.0终于在上2020-09-18发布了,带了翻天覆地的变化,使用了Typescript 进行了大规模的重构,带来了Composition API RFC版本,类似React Hook 一样的写Vue,可以自定义自己的hook ,让使用者更加的灵活,接下来总结一下vue 3.0 带来的部分新特性. setup() ref() reactive() isRef() toRefs() computed() watch() LifeCycle Hooks(新的生命周期) Te

  • 10分钟内讲解Npm脚本使用教程

    目录 引言 1.什么是npm脚本? 2.原则 3.通配符 4.传递参数 5.执行顺序 6.默认值 7.钩子 8.缩写形式 9.变量 10.常见脚本示例 11.使用nrm管理npm镜像 引言 使用Node进行开发时,必须使用npm,脚本是npm的最强大和最常见的功能之一. 我将在本文中介绍如何使用npm脚本. 1.什么是npm脚本? Npm允许您使用文件中的scripts字段定义脚本命令package.json. { // ... "scripts": { "build&quo

  • 5分钟快速搭建FTP服务器的图文教程

    一.什么是FTP FTP(File Transfer Protocol)是TCP/IP网络上两台计算机传送文件的协议,使得主机间可以共享文件. 二.搭建前期准备 1.首先打开控制面板找到"程序"点击打开,如下图所示: 2.在打开的"程序"窗口中,找到"启用或关闭windows功能"点击打开,如下图所示: 3.在"windows功能"中找到"Internet Information Services",并选中

  • gulp教程_从入门到项目中快速上手使用方法

    gulp是什么? gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率.在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都是有规律的.找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些"重复工作" 一.安装gulp与压缩js文件 命令: npm install gulp -g npm install gulp --save-dev 初始化项目package.json的配置:n

随机推荐