vue.js vue-router improves user experience

This time I will bring you vue.js vue-router to improve the user experience. What are the precautions for vue.js vue-router to improve the user experience. The following is a practical case, let’s take a look.

Preface

Everyone knows that for single-page applications, the official provides vue-router for routing jump processing. Recently, I am working on a SPA based on vue-router and want to unify the invalid routing (404) page. deal with.

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

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

In my understanding, vue-router matches the registered route according to the path. If it matches, it loads the corresponding component. If it does not match, it resets (or clears) the corresponding router-view.

Therefore, if we do not process it, 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 to monitor route changes. Monitoring all route changes will naturally fall 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

Conditional rendering can be used. If the route is valid, the router-view will be rendered. 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: 'App',
 computed: {
  invalidRoute () {
  return !this.$route.matched || this.$route.matched.length === 0;
  }
 }
 };
</script>

As for how friendly the 404 is, it’s up to you

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the use of cube-ui, the mobile component library

How to call the WeChat sharing function in nodejs

The above is the detailed content of vue.js vue-router improves user experience. For more information, please follow other related articles on the PHP Chinese website!