preface

When you’re building a modern Web application, you inevitably need to jump from page to page. It is important to do this easily. To achieve this, frameworks such as Angular, React, and Vue have routing capabilities.

Next, we will learn how to use vue-router to configure routes and jump between different routes.

If you’ve been following me, you’ll remember that I wrote some articles on how to implement routing in Angular, using the Angular router to jump between pages. Although a completely different framework, some of the concepts can be applied to Vue.

Create a new Vue project using the Vue CLI (command line tool),

For simplicity, we’ll create a new Vue project and apply it to this example. For the example, we will use the Vue CLI tools to build our project, make sure you have them installed

vue init webpack router-project
Copy the code

During project initialization, it does not matter whether standalone (build alone: runtime and compiler) or runtime-only (runtime mode) is used. Make sure vue-Router is installed, because we will use it later. The Linter and test packages are optional because we will not use them in this example

When the project initialization is complete, run the following command:

cd router-project
npm install
Copy the code

At this point, we can start writing code

Write pages and configure routes

Vue CLI has created helloWorld. Vue file for us in SRC/Components directory, go to this directory and change helloWorld. Vue to page1

Open the project SRC/components/page1. Vue, write the following code:

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'Page1',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'}}}</script>

<style scoped>
    h1.h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
Copy the code

You’ll notice that the code above is just a simplified version of what we got from the build project. In the

SRC /components/page1. Vue and rename it page2.vue. For simplicity, our routing pages will all look similar

SRC /components/page2.vue code should look like this:

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'Page2',
        data () {
            return {
                msg: 'Hey Nic Raboy'}}}</script>

<style scoped>
    h1.h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
Copy the code

In the code above, we have changed the component name and the content of MSG. But not much more complicated than the initialization code

Now we can configure the route:

Open SRC /router/index.js and type the following code

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Page2 from '@/components/page2'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: "/",
            redirect: {
                name: "Page1"
            }
        },
        {
            path: '/page1',
            name: 'Page1',
            component: Page1
        },
        {
            path: '/page2',
            name: 'Page2',
            component: Page2
        }
    ]
})
Copy the code

So what does this code do?

First, we introduced the Page1 and Page2 components. Each component becomes a route to our application, so you need to write them to the Routes array

Typically, we don’t set Page as the default route, but redirect to it when the program loads. Each of the routers has a path and a component that matches a name. Path is what appears in the browser URL bar, and we can jump to path or name in the future

Using the Vue CLI and scaffolding, we bind the router to our root container in SRC /main.js. Now we can think about using it

Jump from page to page through HTML tags and through Javascript code

We have two components and two possible paths, so we can jump to pages between them. You can do this with HTML tags or JavaScript code.

Open the SRC /components/page1. Vue file, in the

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <router-link to="/page2">Navigate to Page2</router-link>
    </div>
</template>
Copy the code

It is worth learning that there is a

tag in the code above. When the element is clicked, Vue navigates the page to the specified routing path

If you want to navigate by name, you can change the code to:

<router-link :to="{ name: 'Page2' }">Navigate to Page2</router-link>
Copy the code

That’s an example of navigating through HTML tags. Let’s use JavaScript code to do the same

Open SRC /components/page2.vue and change the code in 

<script>
    import router from '.. /router'

    export default {
        name: 'Page2',
        data () {
            return {
                msg: 'Hey Nic Raboy'}},methods: {
            navigate() {
                router.push({ name: "Page1"}); }}}</script>
Copy the code

Notice that in the code above we introduce the route configuration file. On this basis we can create a method called navigate, which pushes a route so that we can jump to Page1

We need to call the navigate method somewhere. Going back to the

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <a style="cursor: pointer; text-decoration: underline" v-on:click="navigate()">Navigate to Page1</a>
    </div>
</template>
Copy the code

Here, we use the V-on: Click event to call the navigate method

If you need to implement the function to return to the previous page, you can write:

methods: {
    navigate() { router.go(-1); }}Copy the code

You even change the -1 parameter to something else to return to the penultimate page

conclusion

In this section, you learned how to jump between routes using the VUe-Router library in a Vue application. Jumps can be implemented through HTML markup JavaScript code, and can be done easily. In the next tutorial, we’ll explore how to pass data between page jumps using routing. This is useful in master-detail scenarios.

Via: www.thepolyglotdeveloper.com/2017/11/rou…

Translator: Alex1996a segmentfault:segmentfault.com/u/jianrui