Vue-router has two methods for page hopping.

1 <router-link>component

<template> <div> <h3> home </h3> <router-link to="/about"</router-link> </div> </template>Copy the code

Effect:

Rendered code:

As you can see, the

component is rendered as a
tag.

The

component has the following properties:

attribute instructions
to The path to jump to. Of course, we can use V-bind to do something similar.
tag Specifies what label to render into, default render to<a>The label.
replace Replace mode is used, so no History is left.
active-class when<router-link>If it matches the current route, the system automatically sets a router-link-active class for the current element. Setting this property allows you to change the default class name (router-link-active). When designing the navigation bar, you can use this property to highlight the navigation menu item corresponding to the current page.

2 the router instances

Some scenarios, if implemented in JavaScript, can be implemented using router instances:

<template>
    <div>
        <h3>简介</h3>
        <button @click="clickByRouter"</button> </div> </template> <script>export default {
        name: "about",
        methods:{
            clickByRouter(){
                this.$router.push('/article/321')
            }
        }
    }
</script>
Copy the code

Effect:

The $router also defines the following methods:

methods instructions
replace similar<router-link>Component’s Replace property function.
go similarwindow.history.go(), how many steps forward (positive) or backward (negative) can be taken in the browser’s history.