How to implement invalid routing prompts through vue-router in vue.js

As we all know, vue-router is the official routing plug-in of Vue.js. It is deeply integrated with vue.js and is suitable for building single-page applications. The following article mainly introduces you to vue- in vue.js. Friends who need information about how to implement invalid routing (404) friendly prompts can refer to it.

Preface

Everyone knows that for single-page applications, the official provides vue-router for routing jump processing, and recently it is doing A SPA based on vue-router wants to uniformly handle invalid routing (404) pages.

I really didn’t find any specific instructions in the official documents this time [face covering]

So this article is just an idea for my DIY, please forgive me =_=

In my understanding, vue-router matches the registered route according to the path. If it matches, it will load the corresponding component. If it does not match, it will reset (or clear) the corresponding router-view.

So, if we don’t do any processing, the final page will be blank.

So, can we make a fuss about route matching?

Route monitoring

In the component, you can get the current route from this.$route, then you can use Watch monitors routing changes. Monitoring all routing changes naturally falls on the root routing component (such as App.vue).

Invalid route detection

$route.matched contains the matching result of the current route. If it is empty, the current route is invalid.

Interface prompt

You can use conditional rendering. If the route is valid, the router-view will be rendered, and if the route is invalid, the prompt message will be rendered.

Demo

App.vue

<template>
 <p v-if="invalidRoute">404</p>
 <router-view v-else></router-view>
</template>
<script type="text/babel">
 export default {
 name: &#39;App&#39;,
 computed: {
  invalidRoute () {
  return !this.$route.matched || this.$route.matched.length === 0;
  }
 }
 };
</script>

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

Related articles:

About how to merge Object values ​​when using JavaScript

How to implement verification in Angular

How to implement table sorting in Angular

In Vue, there is something about how to use localstorage and sessionstorage

How jackson parses json string

How to read local files in js

The above is the detailed content of How to implement invalid routing prompts through vue-router in vue.js. For more information, please follow other related articles on the PHP Chinese website!