登录  /  注册
首页 > web前端 > Vue.js > 正文

如何使用VueRouter4.x?快速上手指南

青灯夜游
发布: 2022-07-13 20:11:35
转载
1895人浏览过

如何使用vuerouter4.x?下面本篇文章就来给大家分享快速上手教程,介绍一下10分钟快速上手vuerouter4.x的方法,希望对大家有所帮助!

如何使用VueRouter4.x?快速上手指南

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

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 &#39;./components/root.vue&#39;
export default [
  {
    path: &#39;/&#39;,
    // 引入组件
    component: RootComponent
  },
  {
    path: &#39;/hello&#39;,
    // 路由懒加载引入组件
    component: () => import(&#39;./components/HelloWorld.vue&#39;)
  }
]
登录后复制

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

代码运行结果如下所示:

1.gif

路由懒加载

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

component: () => import(&#39;./components/HelloWorld.vue&#39;)
登录后复制

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

2.gif

动态路由

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

例如:

{
  path: &#39;/user/:id&#39;,
  component: () => import(&#39;@/components/User&#39;)
}
登录后复制

在模板中跳转如下:

<router-link to="/user/10010"></router-link>
登录后复制

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

import { useRouter } from &#39;vue-router&#39;
const {push} = useRouter()
push({
  path: &#39;/user&#39;,
  params: { id: 10010 }
})
// 或者
let id = 10010
push(&#39;/user/&#39; + id)
登录后复制

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

匹配所有路由

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

{
  path: &#39;/:pathMatch(.*)&#39;,
  component: () => import(&#39;./components/Page404.vue&#39;),
},
登录后复制

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

路由嵌套

现在我们有一个需求,就是在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(&#39;./components/HelloWorld.vue&#39;),
  children: [
    {
      path: 'about',
      component: () => import('./components/about.vue'),
    },
    {
      path: 'user',
      component: () => import('./components/user.vue'),
    },
  ],
},
登录后复制

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

3.gif

写在最后

这篇文章到这就结束了,总的来说比较简单没有什么太深入的东西,比较适合入门。

【相关视频教程推荐:vuejs入门教程web前端入门

以上就是如何使用VueRouter4.x?快速上手指南的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号