The routing page in vue does not display

When developing with Vue, we often need to use Vue Router to implement page routing and jumping. However, during the actual development process, we sometimes find that the routing page cannot be displayed normally, which will cause certain troubles to our development. This article will combine actual cases and solutions to discuss the problem of routing pages not being displayed in Vue.

1. Routing configuration error

When using Vue Router for routing configuration, it generally needs to be done in the router/index.js file. What needs to be noted here is that the format of the routing configuration should be an array, and each object represents a route.

The following is a sample code for a simple router/index.js file:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
})

Among them, each object in the routes array contains three attributes: path, name and component. These properties represent the path, name, and corresponding components of the route.

If the routing configuration is incorrect, the page will not jump and display correctly. For example, if we write the value of path incorrectly, such as "path" instead of "path/", the route will not be able to correctly match the corresponding component, and the page will not be displayed.

2. Component introduction error

When performing route jump, we need to specify the corresponding component. If we write the wrong component name or path in the routing configuration, the page will not be displayed correctly.

The following is an example:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail1
    }
  ]
})

In the above example, we wrote the name of the Detail component wrong, causing the page to not be displayed correctly. We need to make sure that the component name or path used in the routing configuration is correct.

3. Lack of routing exit

Even if there are no problems with our routing configuration and component introduction, sometimes the page will not be displayed correctly. At this time, it may be because it is not in the App. Add the corresponding routing exit in vue.

The following is a sample code of a simple App.vue file:

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

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

<style>
// ...
</style>

In the above example, we use the component to display the content of the corresponding route. If Without adding this component, the routing page cannot be displayed correctly.

4. Vue version issue

If we are using an older Vue version, it may also cause the routing page to not display properly. In older versions, there may be some bugs and issues that have been fixed, causing routing to not work correctly.

In order to solve this problem, you can try to upgrade to the latest Vue version. At the same time, we also need to ensure that the Vue Router version matches the Vue version to ensure normal routing work.

Summary:

The above are several possible reasons and solutions for the routing page not being displayed in Vue. In the Vue development process, routing is a relatively important function. We need to take routing configuration and component introduction seriously to ensure the correctness of the program. If you encounter a problem that the route cannot be displayed, you can troubleshoot and solve it by checking the routing configuration, component introduction, route export, and Vue version.

The above is the detailed content of The routing page in vue does not display. For more information, please follow other related articles on the PHP Chinese website!