How to use Vue-Router patterns and hooks (detailed tutorial)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use Vue-Router patterns and hooks (detailed tutorial)

亚连

Jun 02, 2018 pm 05:42 PM

vue-router model hook

This article mainly introduces the usage of Vue-Router mode and hooks. Now I will share it with you and give you a reference.

The previous article mainly wrote about the basic use of vuer-router. It can be said that it solves the problem of food and clothing. Now let’s have some afternoon tea

Mode

The mode options in vue-router are mainly defined when the router is instantiated, as follows

const router = new VueRouter({
　　　mode: &#39;history&#39;, // 两种类型history 还有 hash
   routes: routes // 可以缩写成routes
})

Copy after login

There are two modes to choose from, history and hash, for a rough comparison,

##hashUse Simple, no need for background supportExists in the form of hash in the URL and will not be transmitted to the backgroundhistoryThe address is clear and easy to understand and the background Processing requires background cooperation

Mode	Advantages	Disadvantages

The hash mode is a url to the background, because the hash value in the address will not be transmitted to the background, so Just do a mapping of the root address on the server side.

The final routing of the history mode is reflected in the pathname of the URL. This part will be transmitted to the server, so the server needs to map each possible path value accordingly. Or use fuzzy matching for mapping.

In addition, in history mode, if the backend does not perform one-to-one mapping, but fuzzy matching, then you should pay attention to the 404 situation. At this time, you need to define the 404 page in the front-end router.

404 route definition

Since the router itself is matched from top to bottom, if a matching route is found earlier, it will jump. Therefore, you can directly add the 404 route at the end, as follows

let routerConfig = [{
  path: &#39;/pages&#39;,
  component: App,
  children: [{
    path: &#39;demo/step1/list&#39;,
    component: coupon,
    name: &#39;coupon-list&#39;,
    meta: {
      title: &#39;红包&#39;
    }
  }]
}, {
  path: &#39;*&#39;,
  component: NotFound,
  name: &#39;notfound&#39;,
  meta: {
    title: &#39;404-页面丢了&#39;
  }
}]

Copy after login

When the previous match cannot be found, * represents all, which means they all point to the 404 page

Routing hook

Routing hooks are mainly defined for users to perform some special processing when routing changes. Damn. . What a mouthful.

Generally speaking, Vue provides three major types of hooks

1, global hooks

2, hooks exclusive to a certain route
3, In-component hooks

Global hooks

As the name suggests, global hooks are used globally and are used as follows

const router = new VueRouter({
  mode: &#39;history&#39;,
  base: __dirname,
  routes: routerConfig
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || &#39;demo&#39;
  if (!to.query.url && from.query.url) {
    to.query.url = from.query.url
  }
  next()
})

router.afterEach(route => {
})

Copy after login

Exclusive hooks for a certain route

As mentioned, it is used separately for a certain route, which is essentially the same as the hook in the subsequent component. They all refer to a specific route. The difference is that the general definition here is in the router, not in the component. As follows

const router = new VueRouter({
 routes: [
  {
   path: &#39;/foo&#39;,
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

Copy after login

Hooks within the component

First look at the official definition:

You can directly define the following routing navigation hooks within the routing component

beforeRouteEnter
beforeRouteUpdate (new in 2.2)
beforeRouteLeave

Routing component! Routing component! Routing component! Important things are said three times. Everyone must pay attention to the "routing component" mentioned here, and the routing component! == component, routing component! == component, routing component! == Components! I never paid attention to this before, and then I foolishly adjusted the hook function in the subcomponent and found that it was useless. . .

Let’s first take a look at what is a routing component?

Routing components: components directly defined at the component in the router

That is to say, components other than the entry vue file defined in the router do not have hook functions, so there is no need to use them. . But if you use it, no error will be reported, it will just be unresponsive. (I wanted to draw a picture, but I’m too lazy... Just understand it yourself, it’s easy to understand)

Let’s look back at how to use the hook in the route. It’s very simple and Data and method level methods

beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
},
computed: {},
method: {}

Copy after login

Three routing hooks involve three parameters. Let’s go directly to the official introduction here

to: Route: About to Entering target route object
from: Route: Route that the current navigation is leaving
next: Function: This method must be called resolve this hook. The execution effect depends on the calling parameters of the next method.
next(): Proceed to the next hook in the pipeline. If all hooks are executed, the navigation status is confirmed.
next(false): Interrupt current navigation. If the browser's URL changes (perhaps manually by the user or by the browser's back button), the URL address will be reset to the address corresponding to the from route.
next(‘/’) or next({ path: ‘/’ }): Jump to a different address. The current navigation is interrupted and a new navigation is started.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to replace node elements with jQuery

Servlet3.0 interacts with pure javascript through Ajax Detailed example explanation

Instance code of tree-shaped dish implemented by vue

The above is the detailed content of How to use Vue-Router patterns and hooks (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7467

CakePHP Tutorial

1376

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

What does WeChat's Do Not Disturb mode do? Feb 23, 2024 pm 10:48 PM

What does WeChat Do Not Disturb mode mean? Nowadays, with the popularity of smartphones and the rapid development of mobile Internet, social media platforms have become an indispensable part of people's daily lives. WeChat is one of the most popular social media platforms in China, and almost everyone has a WeChat account. We can communicate with friends, family, and colleagues in real time through WeChat, share moments in our lives, and understand each other’s current situation. However, in this era, we are also inevitably faced with the problems of information overload and privacy leakage, especially for those who need to focus or

What is sleep mode used for on iPhone? Nov 04, 2023 am 11:13 AM

iOS devices have long been able to track your sleep patterns and more using the Health app. But isn’t it annoying when you’re disturbed by notifications while you’re sleeping? These notifications may be irrelevant and therefore disrupt your sleep patterns in the process. While Do Not Disturb mode is a great way to avoid distractions while sleeping, it can cause you to miss important calls and messages you receive during the night. Thankfully, this is where sleep mode comes in. Let’s learn more about it and how to use it on iPhone. What role does sleep mode play on the iPhone? Sleep mode is a dedicated focus mode in iOS that is automatically activated based on your sleep schedule in the "Health" App. It helps you set an alarm and then

I encountered the vue-router error 'NavigationDuplicated: Avoided redundant navigation to current location' in my Vue application - how to solve it? Jun 24, 2023 pm 02:20 PM

The vue-router error "NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation" encountered in the Vue application – how to solve it? Vue.js is becoming more and more popular in front-end application development as a fast and flexible JavaScript framework. VueRouter is a code library of Vue.js used for routing management. However, sometimes

Do Not Disturb Mode Not Working in iPhone: Fix Apr 24, 2024 pm 04:50 PM

Even answering calls in Do Not Disturb mode can be a very annoying experience. As the name suggests, Do Not Disturb mode turns off all incoming call notifications and alerts from emails, messages, etc. You can follow these solution sets to fix it. Fix 1 – Enable Focus Mode Enable focus mode on your phone. Step 1 – Swipe down from the top to access Control Center. Step 2 – Next, enable “Focus Mode” on your phone. Focus Mode enables Do Not Disturb mode on your phone. It won't cause any incoming call alerts to appear on your phone. Fix 2 – Change Focus Mode Settings If there are some issues in the focus mode settings, you should fix them. Step 1 – Open your iPhone settings window. Step 2 – Next, turn on the Focus mode settings

What does epc+o mode mean? Nov 09, 2022 am 10:54 AM

The epc+o model refers to the general contracting framework that integrates design, procurement, etc. It is some operational links derived from epc; that is, during the construction period, the general contractor must not only undertake design tasks in the traditional sense In addition, it also has to undertake all maintenance tasks during the operation period. This model can greatly improve the operational efficiency of many projects and quickly reduce operating costs.

How to leave S mode on Windows 10/11 Aug 03, 2023 pm 08:17 PM

Windows in S mode is designed to provide enhanced security and performance by only allowing the installation of apps from the Microsoft Store. While this feature helps prevent malware and ensure a secure computing environment, it may limit users who want to install applications from sources other than the Microsoft Store. If you find yourself in this situation and keep asking yourself how to switch out of S mode in Windows 10/11, then you have come to the right place as we will walk you through how to switch out in Windows 10/11 using two different methods Steps to S Mode ensure you can enjoy the freedom of installing apps from anywhere you choose. Learn how to switch out of S mode in Windows

iPhone 15 Pro: How to get rid of the silent mode symbol in the status bar Sep 24, 2023 pm 10:01 PM

On iPhone 15 Pro and iPhone 15 Pro Max models, Apple introduced a physically programmable action button that replaces the traditional ring/silent switch above the volume buttons. The action button can be programmed to perform several different functions, but the ability to switch between silent and ring modes isn't gone. By default, a long press on the action button will silence the device and the button's tactile feedback will pulse three times. Both iPhone 15 Pro models will display a crossed-out bell symbol next to the time in the status bar to indicate that silent/silent mode is activated, and it will remain so until you long-press the Action button again to unmute the device. If you prefer to put your iPhone in silent mode

Guide to using standby mode in iOS 17 Aug 22, 2023 pm 04:01 PM

Standby mode is coming to iPhone with iOS17, and this guide aims to show you how to use this feature on your iPhone. Standby Mode is a breakthrough feature that transforms iPhone into a dynamic, always-on smart display. When your iPhone is laid horizontally on its side during charging, it activates standby mode. This mode beautifully showcases a host of useful widgets, including but not limited to the current time, local weather updates, a slideshow of your favorite photos, and even music playback controls. A significant advantage of this mode is its ability to display notifications, allowing users to view and engage with them without having to fully wake up their iPhone. How to Use Standby Mode For Standby Mode to work properly, your iPhone must be running i

See all articles