In-depth analysis of Vue router-link component to implement route navigation

Vue Router

With Vue.js, we have composed our application with components. When adding Vue Router, all we need to do is map our components to routes so that Vue Router knows where to render them. [Related recommendations: vue.js video tutorial]

Usage of Vue Router

Declarative

Use router-link component navigates by passing to to specify the link.
b988a8fd72e5e0e42afffd18f951b277 will render a 3499910bf9dac5ae3c52d5ede7383485 tag with the correct href attribute.
Official example:

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

Instead of using the regular a tag, a custom component router-link is used to create the link. This allows Vue Router to change the URL without reloading the page, handling URL generation and encoding.

router-view
router-view The component corresponding to the url will be displayed. You can place it anywhere to suit the layout.

Programmatic Navigation

In addition to using b988a8fd72e5e0e42afffd18f951b277 to create a tag to define navigation links, we can also use the instance method of router to write code. accomplish.

To navigate to a different URL, you can use the router.push method. This method will add a new record to the history stack, so when the user clicks the browser's back button, they will be returned to the previous URL.

When b988a8fd72e5e0e42afffd18f951b277 is clicked, this method will be called internally, so click 327e3535b9e0e9f12607bd1fd4e603ad Equivalent to calling router.push(...):

Declarative	Programmatic
327e3535b9e0e9f12607bd1fd4e603ad	router.push(...)

#The parameter of this method can be a string path, or an object describing the address.

// 字符串路径
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' })

Note: If path is provided, params will be ignored

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

Replace the current position

The function is the same as router.pushSimilar, except that it does not add new records to the history during navigation

Declarative	Programmatic
123ae1b08ffed7a74481c5907bc02f7d	router.replace(...)

You can also add an attribute directly to the routeLocation passed to router.pushreplace: true ：

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

Across history

This method takes an integer as a parameter, indicating how many steps forward or backward in the history stack, similar to window.history.go( n).

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

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

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

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

The above is the detailed content of In-depth analysis of Vue router-link component to implement route navigation. For more information, please follow other related articles on the PHP Chinese website!