What should I do if vue does not jump when using router?

In Vue, router is a commonly used routing management tool, which can easily realize page jumps and switching in single page applications (SPA). But sometimes there is a problem that Vue does not jump when using the router. We need to accumulate some experience and skills during the development process to solve this problem.

1. Check the routing configuration

If Vue uses router and does not jump, you first need to check whether the routing configuration is correct. In Vue, routing configuration mainly includes the following aspects:

1. Create Vue Router instance

In router.js, we need to create a Vue Router instance and configure routing information. For example:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

export default router

In this example, we use the Vue.use() method to install the Router plug-in, then create a Router instance and configure routing information. Among them, the routes attribute is used to define specific routing rules, the path attribute is used to specify the routing path, and the component attribute is used to specify the component corresponding to the route.

2. Register routing instance

In App.vue, we need to register the created Vue Router instance into the Vue instance. For example:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import router from './router'

export default {
  name: 'App',
  router
}
</script>

In this example, we mount the created router instance to the root instance of Vue.

If the routing configuration is correct, we can try to re-run the project to see if the routing can jump normally.

2. How to check route jump

If the routing configuration is correct, you also need to check the route jump method. There are mainly the following methods for routing jumps:

1. Use the tag with the to attribute

In Vue,

<router-link to="/about">关于我们</router-link></p>
<p>When using the <router-link> tag, you need to pay attention to the following points: </p>
<ul>
<li>The to attribute specifies the path of the target route, which can be a string or object ;</li>
<li>If the to and tag attributes are specified at the same time, the tag specified by the tag attribute will be used to generate the anchor link;</li>
<li>If the to and replace attributes are specified at the same time, the route will not Recorded in the history, the back function of the page can be realized; </li>
<li>If the to and active-class attributes are specified at the same time, the specified CSS class will be automatically added to the current element when the navigation is successful. </li>
</ul>
<p>If the <router-link> label is used improperly, the route may not be redirected. For example, the path of the target route is not specified using the to attribute, or the specified path is incorrect. </p>
<ol start="2"><li>Using programmatic navigation</li></ol>
<p>In Vue, we can also use programmatic navigation to achieve page jumps. For example: </p>
<pre class="brush:php;toolbar:false">this.$router.push('/about')

When using programmatic navigation, you need to pay attention to the following points:

• The way to jump to the page can be push, replace, go, back, etc.;
• If the jump path is an object, you need to specify attributes such as path, query, hash, and params in the object to specify the path, query parameters, hash fragments, etc. of the target route;
• If you jump If the transfer path is a named route, you need to specify the name attribute in the object.

If the parameters passed when using programmatic navigation are incorrect, the route may not jump.

3. Check the conditions for route jump

If the route jump method is correct, you also need to check the conditions for route jump. The following are some conditions that may affect route jumps:

1. Route Guard

In Vue, route guard is a mechanism used to control route jumps. In route guard, we can decide whether to allow route jumps based on different situations. For example:

const router = new VueRouter({
  routes: [...],
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // 判断是否需要登录
    if (sessionStorage.getItem('isLogin')) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

In this example, we use the beforeEach routing guard to determine whether the page requires login to access. If login is required and the current user is not logged in, it will jump to the login page.

During the use of route guards, if the return value is incorrect, the route may not be redirected.

2. Conditional rendering

In Vue, conditional rendering is a mechanism used to control the display and hiding of page elements. In conditional rendering, we can decide whether an element should be displayed based on different situations. For example:

<router-link v-if="isLogin" to="/about">关于我们</router-link>

In this example, we use the v-if directive to determine whether the current user is logged in. If you are logged in, an "About Us" link will appear.

During the use of conditional rendering, if the judgment conditions are incorrect, the element may not be displayed or jump.

4. Summary

The problem that Vue does not jump when using the router may be caused by routing configuration, jump method, jump conditions and other reasons. We need to carefully examine the routing usage process to find the problem. At the same time, we also need to accumulate more experience and skills in using Vue Router to better deal with these problems.

The above is the detailed content of What should I do if vue does not jump when using router?. For more information, please follow other related articles on the PHP Chinese website!