경로 탐색 구현을 위한 Vue 라우터 링크 구성 요소에 대한 심층 분석

Vue Router

Vue.js를 사용하여 애플리케이션을 구성 요소로 구성했습니다. Vue Router를 추가할 때 우리가 해야 할 일은 구성 요소를 경로 에 매핑하여 Vue Router가 렌더링할 위치를 알도록 하는 것입니다. [관련 권장 사항: vue.js 비디오 튜토리얼]

Vue Router 사용

Declarative

탐색을 위해 router-link 구성 요소를 사용하고 to를 전달하여 링크를 지정합니다.
<router-link></router-link>는 올바른 href 속성을 ​​사용하여 <a></a> 태그를 렌더링합니다.
공식 예: to 来指定链接。
<router-link> 将呈现一个带有正确 href 属性的 <a> 标签。
官方示例：

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

这里没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

router-view
router-view 将显示与 url 对应的组件。可以把它放在任何地方，以适应布局。

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

声明式	编程式
<router-link :to="...">	router.push(...)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

注意：如果提供了 path，params 会被忽略

// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

替换当前位置

作用与router.push类似，不同的是，它在导航时不会向 history 添加新记录

声明式	编程式
<router-link :to="..." replace>	router.replace(...)

也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true：

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于window.history.go(n)

// 向前移动一条记录
router.go(1)
// 相当于
router.forward()

// 返回一条记录
router.go(-1)
// 相当于
router.back()

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

일반 a 태그를 사용하는 대신 사용자 정의 구성요소인 router-link를 사용하여 링크를 생성합니다. 이를 통해 Vue Router는 페이지를 다시 로드하지 않고 URL 생성 및 인코딩을 처리하지 않고도 URL 🎜을 변경할 수 있습니다. 🎜🎜🎜router-view🎜
router-view는 URL에 해당하는 구성요소를 표시합니다. 레이아웃에 맞게 어디에나 배치할 수 있습니다. 🎜🎜프로그래밍 방식 탐색🎜🎜 <router-link>를 사용하여 탐색 링크를 정의하는 태그를 만드는 것 외에도 라우터의 인스턴스 메서드를 사용하여 코드를 작성하여 구현할 수도 있습니다. 🎜🎜다른 URL로 이동하려면 router.push 메소드를 사용할 수 있습니다. 이 방법은 기록 스택에 🎜새 레코드를 추가🎜하므로 사용자가 브라우저 뒤로 버튼을 클릭하면 이전 URL로 돌아갑니다. 🎜🎜<router-link>를 클릭하면 내부적으로 이 메소드가 호출되므로 <router-link :to="...">를 클릭하면 router.push(...) 호출의 경우: 🎜

선언적	프로그래밍 방식
<router-link :to="...">	router.push(...)

🎜 이 메소드의 매개변수는 문자열 경로이거나 주소를 설명하는 객체일 수 있습니다. 🎜rrreee🎜🎜참고🎜: 경로가 제공되면 매개변수가 무시됩니다🎜rrreee🎜현재 위치 바꾸기🎜🎜이 기능은 router.push와 유사하지만 차이점은 기록을 푸시하지 않는다는 것입니다. 탐색할 때 새 레코드 추가🎜

선언적	프로그래밍 방식
<router-link :to="..." 교체>	router.replace(...)

🎜 router.push에 전달된 routeLocation에 replace: true: 🎜rrreee🎜Across History🎜🎜이 메서드는 정수를 매개변수로 사용하여 <code>window.history.go(n)와 유사하게 기록 스택에서 앞으로 또는 뒤로 몇 단계를 나타내는지 나타냅니다. 🎜아아아아

위 내용은 경로 탐색 구현을 위한 Vue 라우터 링크 구성 요소에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!