How to use routing to implement page jump in Vue?-Vue.js-php.cn

How to use routing to achieve page jump in Vue?

With the continuous development of front-end development technology, Vue.js has become one of the most popular front-end frameworks. In Vue development, page jump is an essential part. Vue provides Vue Router to manage application routing, and seamless switching between pages can be achieved through routing. This article will introduce how to use routing to implement page jumps in Vue, with code examples.

First, install the vue-router plug-in in the Vue project. You can install it with the following command:

npm install vue-router

Copy after login

After the installation is complete, introduce vue-router in the main.js file and use it:

import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ el: '#app', router, render: h => h(App) })

Copy after login

Configure routing in the router.js file:

import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] })

Copy after login

In this example, we configured two routes: home page (/) and about page (/about). Home and About are two components respectively, which need to be created under the views folder.

Add the routing outlet in App.vue:

Copy after login

Now, we have completed the basic routing configuration. Next, we can use routing in the component to implement page jumps.

In the component that needs to jump to the page, you can use thetag to generate a jump link. For example, we can add a link to the About page in the Home.vue component:

Copy after login

We can also add a link back to the Home page in the About.vue component:

Copy after login

Pass Links generated by thetag will be automatically converted intotags.

In addition to using thetag to generate links, we can also implement page jumps programmatically. Where a jump is required, you can use the$routerobject to call the methods provided by Vue Router. For example, in the click event handler of a button, you can use the following code to implement the jump:

methods: { goToAbout() { this.$router.push('/about') } }

Copy after login

The above code implements the page jump through the$router.push()method, and the parameters are The path to the page to jump to.

After configuring routing and implementing page jumps through the above steps, we can freely jump to pages in the Vue project. In actual development, you can configure more routes according to specific needs, and use other functions provided by Vue Router to implement more complex page jump logic.

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