How to implement page jump in Vue project

Problem description:

vue-router is a module used to implement routing page jumps in front-end development. Below, the editor will show you how to implement page jump based on the already created vue-router project.

Experimental results and discussion:

1. Create a vue-cli default project (containing only babel)

2. Enter the creation file

Enter the created file path as an administrator and run the command npm install vue-router –save

(If the Taobao image has been installed, run cnpm install vue-router-save)

3. Check the configuration

In package.json, you can check whether vue-router has been successfully configured.

4. Create views folder

Create a new views folder and create two components, home.vue and about.vue, in this folder

5. Set up APP.vue

Set up as follows:

<template>

<div id="app">

<div id="nav">

<router-link to="/">home</router-link> |

<router-link to="/about">about</router-link>

</div>

<router-view/>

</div>

</template>

<style>

#app {

text-align: center;

margin-top: 60px;

}

</style>

6. Configure main.js

import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({

mode: 'history',

base: process.env.BASE_URL,

routes: [

{

path: '/',

name: 'home',

component: Home

},

{

path: '/about',

name: 'about',

component: () => import( './views/About.vue')

}

]

})

7. Operation results

as follows:

Summary of the problem:

In this experiment, vue-router is installed in the cmd command prompt, and router.js is configured to implement the page jump function. Although a simple page jump function has been successfully implemented, the definition of routes and components in router.js has not been explained clearly. The page jump function will be studied later.

This is the end of this article about how to implement page jump in vue project. For more relevant content about how to implement page jump in vue project, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!