Vue3 Routing (Vue Router)

In this chapter, we will introduce Vue routing.

Vue routing allows us to access different content through different URLs.

With Vue, we can implement multi-view single-page web applications (SPA).

Vue.js routing requires loading thevue-router library

Chinese documentation URL:vue-router documentation。

Vue Router is responsible for mapping URL paths to components in the application. When users navigate in the app, the URL updates but the page does not reload, providing a smooth user experience.

The figure above shows atwo-level nested route structure：

• top-level (App.vueof<router-view>)responsible for renderingstandalone layouts(such asLogin.vue) ormain frame layout（Layout.vue）。
• main frame layout (Layout.vue)internally contains a second<router-view>, used to renderchild components of the feature page(such asDashboard.vue、User.vue), thus achieving persistent display of the header, sidebar, and footer.
• Unmatched paths will eventually lead to an independentpage404.vue。

Core Components

Installation

npm Installation

npm install vue-router

npm (China Mirror)

It is recommended to use the Taobao mirror:

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

Direct Download / CDN

https://unpkg.com/vue-router@4

Basic Usage

1. Create a routing table

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

2. Mount in the application

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3. Page outlet

<router-view></router-view>

4. Navigation

<router-link to="/about">About</router-link>

5. Dynamic Routing

{ path: '/user/:id', component: User }

Visiting /user/10, $route.params.id === '10'.

6. Lazy Loading

const About = () => import('../views/About.vue')

7. Navigation Guards (Authentication)

router.beforeEach((to, from, next) => {
  next()
})

8. Redirect

{ path: '/old', redirect: '/' }

9、404

{ path: '/:pathMatch(.*)*', component: NotFound }

Simple Example

Vue.js + vue-router can easily implement a single-page application.

<router-link>is a component used to set up a navigation link to switch between different HTML content.toThe `to` attribute is the target address, i.e., the content to be displayed.

In the following example, we add vue-router, then configure component and route mappings, and then tell vue-router where to render them. The code is as follows:

router-link

Note that we did not use a regular `<a>` tag, but instead used a custom component `router-link` to create links. This allows Vue Router to change the URL without reloading the page and handle URL generation and encoding. We will see later how to benefit from these features.

router-view

`router-view` will display the component corresponding to the URL. You can put it anywhere to suit your layout.

Clicked navigation links will have styles addedclass ="router-link-exact-active router-link-active"。

Application Example

The following example covers the routing'sDefinition、Creation、Mounting、NavigationandRenderingfive core steps.

1. main.js (entry file)

2. router/index.js (route configuration)

3. App.vue (root component)

When you run this application:

• ClickHomelink, the URL changes to/，<router-view>displays inHome Pagecomponent content.
• ClickAboutlink, the URL changes to/about，<router-view>displays inAbout Uscomponent content.
• Click404 Demolink, the URL changes to/nonexistent，<router-view>displays in404 Not Foundcomponent content.

<router-link> Related Attributes

Next, let's learn more about the attributes of <router-link>.

to

Represents the link to the target route. When clicked, the value of `to` will be passed to `router.push()` immediately, so this value can be a string or an object describing the target location.

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home.html">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

If the replace attribute is set, clicking will call router.replace() instead of router.push(), and no history record will be left after navigation.

<router-link :to="{ path: '/abc'}" replace></router-link>

append

When the append attribute is set, the path is prepended to the current (relative) path. For example, if we navigate from /a to a relative path b, without append the path is /b, with append it is /a/b.

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

Sometimes you want<router-link>to render as a certain tag, for example<li>.tagSo we use

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

prop to specify which tag. It still listens for clicks and triggers navigation.

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Set the CSS class name used when the link is active. It can be replaced by the following code.classNote hereactive-class="_active"。

exact-active-class

use

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event

Configure the class that should be active when the link is exactly matched. It can be replaced by the following code.

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

The above code sets the event to mouseover, and when the mouse moves over Router Link 1, the navigated HTML content will change.

Vue Router (v4, Vue 3) Core API Handbook

I.createRouterConfiguration Options

II. History Factory

III.RouteRecord(Route Record)

IV. Router Navigation (Router Instance Methods)

V. Navigation Guards

VI.<router-link>Props

VII.<router-view>Props

VIII.Route(Current Route Object)

This object is obtained throughuseRoute()orthis.$routeobtained.

IX. Composition API

X. Programmatic Navigation (Complete Example)