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.
<router-link> will render a <a> 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 <router-link> 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 <router-link> is clicked, this method will be called internally, so click <router-link :to="..."> Equivalent to calling router.push(...):

Declarative	Programmatic
<router-link :to="...">	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
<router-link :to="..." replace>	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!