VueRouter4.x를 어떻게 사용하나요? 빠른 시작 가이드

VueRouter4.x를 어떻게 사용하나요? 다음 기사에서는 빠른 튜토리얼을 공유하고 10분 안에 VueRouter4.x를 빠르게 시작하는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

Vue Router는 Vue 팀이 개발한 라우팅 플러그인으로 Vue.js 코어와 긴밀하게 통합되어 Vue Router 최신 버전으로 단일 페이지 프로그램을 매우 간단하게 구축할 수 있습니다. .X. Vue3에 권장되는 버전이기도 합니다. 이 기사에서는 Vue Router4.X에 대해 알아봅니다. (학습 동영상 공유: vue 동영상 튜토리얼)

URL.hash 및 기록

Vue Router에는 두 가지 유형의 history(기록 라우팅 기록), 즉 URL이 있습니다. 해시 및 HTML5에서 제공되는 역사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></router-link>是Vue提供的自定义组件，用于创建链接，在Vue中并没有使用原生的<a></a>，因为<a></a>改变URL后会重新加载页面而<router-link></router-link>不会；关于<router-link></router-link>组件的细节支持哪些属性，可以参考文档。

router-view

<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두 종류.

🎜해시 기록은 호스트가 없는 웹 애플리케이션(예: file://)에 유용하거나 구성 서버가 임의의 URL을 처리할 수 없지만 SEO에 해싱이 매우 좋지 않은 경우에 유용합니다. HTML5의 새로운 기능이며 IE에 그다지 친숙하지 않습니다. 그러나 Vue3은 IE를 포기했기 때문에 IE를 고려할 필요가 없습니다. 이 방법은 현재 가장 일반적인 방법이지만 응용 프로그램은 http 프로토콜을 통과해야 합니다. 제공됩니다. 🎜

🎜설치 및 사용 과정🎜🎜🎜먼저 Vue Router를 설치하고 명령은 다음과 같습니다. 🎜

<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>

🎜그런 다음 main.js에 다음 코드를 작성합니다. code> ：🎜<pre class="brush:js;toolbar:false;">{ path: &#39;/hello&#39;, // 路由懒加载引入组件 component: () =&gt; import(&amp;#39;./components/HelloWorld.vue&amp;#39;), children: [ { path: &#39;about&#39;, component: () => import(&#39;./components/about.vue&#39;), }, { path: &#39;user&#39;, component: () => import(&#39;./components/user.vue&#39;), }, ], },</pre>🎜위 코드에 <code>경로가 너무 많으면 router.js 파일을 정의하고 추출할 수 있습니다. 샘플 코드는 다음과 같습니다. 🎜🎜router.js🎜rrreee🎜main.js🎜rrreee🎜또는 ******router.js에서 경로를 직접 내보냅니다. 🎜🎜 예를 들어 🎜🎜main.js**🎜에서 사용하세요(이 방법이 더 일반적으로 사용됨). 🎜

🎜router-link 및 router-view🎜🎜

🎜router-link🎜

🎜는 링크 생성을 위해 Vue에서 제공하는 사용자 정의 구성 요소입니다. <a></a> URL을 변경하면 페이지가 다시 로드되지만 <router-link></router-link> 구성 요소가 지원하는 속성에 대한 자세한 내용은 <router-link></router-link>를 참조하세요. 문서🎜. 🎜

🎜router-view🎜

🎜<router-view></router-view> 구성 요소는 다음과 같이 URL에 해당하는 구성 요소에 사용됩니다. code ：🎜rrreee🎜그러면 router.js 코드는 다음과 같습니다. 🎜rrreee🎜기타 구성 항목은 문서🎜. 🎜🎜코드 실행 결과는 다음과 같습니다. 🎜🎜🎜

🎜라우트의 지연 로딩🎜🎜🎜애플리케이션이 점점 커지면 패키지된 JavaScript 코드도 특히 커질 것입니다. 전체 애플리케이션을 여러 블록으로 분할해야 하며 Vue Router는 이 기능을 지원합니다. 위 코드와 같이 🎜정적 가져오기를 동적 ​​가져오기로 대체🎜하면 됩니다. 🎜rrreee🎜그런 다음 패키지(webpack, Vite) 이 도구는 아래 그림과 같이 동적으로 가져온 구성 요소를 별도로 패키징합니다. 🎜🎜🎜

🎜동적 라우팅🎜🎜🎜VueRouter를 사용하면 라우팅 일치 규칙을 동적으로 설정할 수 있습니다. 사용자

구성 요소의 경우, 구성 요소의 내용은 다양한 ID에 따라 다른 내용을 표시합니다. 설정 방법은 :매개변수 이름 형식으로만 설정하면 됩니다. 🎜🎜예: 🎜rrreee🎜 다음과 같이 템플릿으로 이동합니다. 🎜rrreee🎜 또는 useRouter 후크에서 제공하는 push 메서드를 사용합니다. 예: 🎜rrreee🎜You useRoute 후크를 통해 라우팅 주소를 얻을 수 있으며 사용법은 useRouter와 일치합니다. 🎜

🎜모든 경로 일치🎜

🎜VueRouter의 동적 라우팅을 사용하면 일치하지 않는 경로를 일치시킬 수 있습니다. 샘플 코드는 다음과 같습니다. 🎜rrreee🎜현재 경로는 다음과 같습니다. 일치하지 않음 성공하면 이 경로가 일치됩니다. 🎜

🎜Route 중첩🎜🎜🎜이제 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></h1>标签，最终效果如下：

写在最后

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

【相关视频教程推荐：vuejs入门教程、web前端入门】

위 내용은 VueRouter4.x를 어떻게 사용하나요? 빠른 시작 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!