How to use routing to achieve page jump and access in Vue

How to use routing to achieve page jumps and access in Vue

In the Vue framework, routing is a very important concept, which can implement single-page applications ( Jumping and accessing between different pages in Single Page Application). Vue provides vue-router to help us manage routing.

1. Install and configure vue-router
First, we need to use npm to install vue-router, open the command line tool, and run the following command:
npm install vue-router

Then, in the main.js file of the project, vue-router needs to be introduced and activated. The code is as follows:
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

const router = new VueRouter({
mode: 'history',
routes: [

{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  component: About
}

]
})

new Vue({
router,
render: h => ; h(App),
}).$mount('#app')

In the above code, we first introduced Vue and VueRouter. Then, use the vue-router plug-in through Vue.use(VueRouter). Next, we defined the router instance, in which the mode is set to history, which is a common routing mode that uses the HTML5 History API to manage routing changes. routes is an array used to define the path, name and corresponding component of the route.

2. Implement page jump and access
In the above code, we defined two routing paths, namely '/' and '/about'. These two paths correspond to two components respectively, where the Home component corresponds to the '/' path, and the About component corresponds to the '/about' path.

In the Vue component, we can use the router-link component to implement routing jumps. The code is as follows:
Home
About

The router-link component in the above code will be rendered into a tag, the displayed text is Home and About, and when clicked, the routing jump will be triggered.

In addition, we can use the router-view component to display the components corresponding to the current route. The code is as follows:

The above code will dynamically render the corresponding components according to the path of the current route.

In addition to using the router-link and router-view components, we can also implement page jumps through programmatic route navigation. The code is as follows:
// In the Vue component
this.$router.push('/') // Jump to the '/' path

Alternatively, we can also use named routes method to achieve page jump. The code is as follows:
// In the Vue component
this.$router.push({ name: 'Home' }) // Jump to the route with name 'Home'

Summary
In Vue, through the vue-router plug-in, we can easily achieve page jumps and access. By configuring routing objects, defining the mapping relationship between routing paths and components, and using router-link components and router-view components, routing navigation and dynamic component rendering can be implemented in the page. In addition, through programmatic route navigation, page jumps can be implemented based on specific conditions in the Vue component. The above is a brief introduction and code example of using routing in Vue to achieve page jumps and access. Hope this helps!

The above is the detailed content of How to use routing to achieve page jump and access in Vue. For more information, please follow other related articles on the PHP Chinese website!