Vue Router vue-router detailed explanation guide

Chinese documentation: https://router.vuejs.org/zh/

Vue Router is the official routing manager for Vue.js. It is deeply integrated with the core of Vue.js, making it easy to build single-page applications. Routing can actually be understood as pointing, that is, when I click a button on a page, I need to jump to the corresponding page, which is a routing jump;

First, let's learn three words (route, routes, router):

• Route: First of all, it is a singular number, which means route, that is, we can understand it as a single route or a certain route;
• routes: It is a plural number, which means that it can be a plural number only when it represents multiple sets; that is, we can understand it as a collection of multiple routes. In JS, there are only two forms of collections representing multiple different states: arrays and objects. In fact, the official definition of routes is an array; so we remember that routes represents a collection of multiple arrays;
• router: translated as router, all the above are routes, this is a router, we can understand it as a container that contains the above two or it is a manager responsible for managing the above two; let's take a common scenario as an example: when the user clicks a button on the page, the router will look for the route in routes, that is, the router will look for the corresponding route in the route collection;

Let's take a look at a small demo (the article is a bit long, so read it patiently. Only by learning slowly can you progress quickly. Of course, you can follow along and type it):

First, you need to install vue-cli to build a vue development environment (I won’t explain how to install it here, just go to Baidu. If you can’t solve this problem yourself, the following knowledge may not be of much benefit to you)

After installing vue-cli, our project directory structure is as follows:

Then we enter npm install vue-router -g in the command line to install vue-router. After installation, we can open the package.json file, where we can see the version number of vue-router.

At this point, our preparations are complete and we are ready to write a demo.

We create three new files in the src directory, namely page1.vue, page2.vue and router.js:

page1.vue:

<template>
    <div>
        <h1>page1</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "I am page1 component"
            }
        }
    }
</script>

page2.vue:

<template>
    <div>
        <h1>page2</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "I am page2 component"
            }
        }
    }
</script>

router.js

//Introduce Vue
import Vue from 'vue';
//Introduce vue-router
import VueRouter from 'vue-router';
//Third-party libraries need to be used before they can be used Vue.use(VueRouter)
//Reference page1 import page1 from './page1.vue';
//Reference page2 import page2 from './page2.vue';

//Define a collection of routes, array type const routes=[
    //Single routes are all object types, path represents the path, component represents the component {path:'/page1',component:page1},
    {path:"/page2",component:page2}
]

//Instantiate VueRouter and add routes to it const router = new VueRouter({
//ES6 abbreviation, equal to routes: routes
    routes
});

//Throw this instance object to facilitate external reading and access to export default router

Here we modify main.js

import Vue from 'vue'
import App from './App'
//Reference router.js
import router from './router.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
//Must be injected into the instance object of vue router,
  components: { App },
  template: '<App/>'
})

Modify App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
//Router-link defines the click trigger part of the page <router-link to="/page1">Page1</router-link>
      <router-link to="/page2">Page2</router-link>
    </div>
//router-view defines the displayed part of the page <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

In this way, our page can perform routing jumps and switching, and the basic use of routing is completed; but there is a problem that we cannot see the routing page when we enter for the first time. This is because we have not set a default value. The path is empty when we first enter, so we can solve it like this:

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1 from './page1.vue';
import page2 from './page2.vue';
import user from './user.vue'

const routes = [
    {path:'/page1',component:page1},
    {path:"/page2",component:page2},
    //You can configure redirection {path:'',redirect:"page1"}
    //Or rewrite a route with an empty path {path:"",component:page1}
]

const router = new VueRouter({
    routes
});

export default router

Both solutions above can be solved. Configuring redirection means that when the matching path is empty, it will redirect to page1 and execute the route of page1; or we can reconfigure a route, and when the path is empty, router-view displays the page of page1;

The difference between using redirection and configuring routing separately:

Redirection actually means executing the corresponding route when the matching path meets the conditions. Of course, the address on the URL at this time shows the corresponding route, and the page is also the corresponding route page;

Reconfigure the route when the path matches the conditions. The router-view page display part is responsible for displaying the page that meets the conditions. In fact, the URL does not change.

Then there are some complex situations that cannot be achieved by basic routing; let's continue to look down

Dynamic route matching:

In fact, there are many such examples in our lives. Have you noticed them? For example, in a website or backend management system, after we log in, there is usually a prompt such as welcome back or XXX. We can achieve this effect through dynamic routing.

First, create a new user.vue file in the src directory:

<template>
    <div>
        <h1>user</h1>
       //Here you can get the route parameters through $route.params.name<p>Welcome back, {{$route.params.name}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "I am page1 component"
            }
        }
    }
</script>

Then we modify the code of the App.vue file:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to="/page1">Page1</router-link>
      <router-link to="/page2">Page2</router-link>
    </div>

//Add two router-link tags <div>
      <router-link to="/user/xianyu">Dynamic routing Xianyu</router-link>
      <router-link to="/user/mengxiang">Dynamic routing dream</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Modify our router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1 from './page1.vue';
import page2 from './page2.vue';
import user from './user.vue'

const routes = [
    {path:'/page1',component:page1},
    {path:"/page2",component:page2},
    // {path:'',redirect:"page1"}
    {path:"",component:page1},
 //Use colon mark, when matched, the parameter value will be set to this.$route.params {path:"/user/:name",component:user}
    
]

const router = new VueRouter({
    routes
});

export default router

After configuration, it can run normally without any accident. Let's take a look at the effect:

Dynamic route matching provides us with convenience, allowing us to achieve the effect of partial modification of the page by configuring a route, giving users a feeling of multiple pages. Isn’t it cool! ! !

While it is cool, it also brings us some problems. Because when using route parameters, navigating from /user/xianyu to /user/mengxiang, the original component instance will be reused, and both routes will render the same component. Compared with destroying and recreating, display reuse is more efficient. The only problem is that the lifecycle hook function will no longer be called, that is, it will no longer be triggered; but there are always more solutions than problems, we can achieve this by monitoring the $route object;

Modify the code of user.vue

<template>
    <div>
        <h1>user</h1>
        <p>Welcome back,{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                // msg: "I am page1 component"
                msg:""
            }
        },
        watch:{
//to indicates the component you are about to enter, and from indicates which component you are coming from. $route(to,from){
                this.msg=to.params.name; 
                console.log(111);
            }
        }
    }
</script>

The effect diagram is as follows:

We can clearly see that the $route object we monitored was triggered and the console also output;

Let's take a look at nested routing:

Nested routes:

Often our page structure determines that we may need nested routes. For example, when we enter the homepage, there are categories. When we select one of the categories, we can enter the corresponding details. At this time, we can use nested routes. The official document provides us with a children attribute, which is an array type, which actually contains a group of routes. At this time, the parent-child relationship structure comes out, so the route in the children attribute is relatively the child route of the external route of the children attribute.

Good memory is not as good as bad code, let's take a look at the code:

First, create two new vue files in our src directory, namely phone.vue and computer.vue

phone.vue

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "Nested mobile components"
            }
        }
    }
</script>

computer.vue

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "Nested Computer Components"
            }
        }
    }
</script>

Then we modify our App.vue file:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <router-link to="/page1">Page1</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

From the App.vue file above, we can see that our page only has a page1 tag at this time;

Let's modify router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import page1 from './page1.vue';
import page2 from './page2.vue';
import user from './user.vue';
import phone from './phone.vue';
import computer from './computer.vue'

const routes = [
    {
        path:'/page1',
        component:page1,
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "computer",
                component: computer
            },
        ]
    },
    // {path:"/page2",component:page2},
    // // {path:'',redirect:"page1"}
    // {path:"",component:page1},
    // {path:"/user/:name",component:user}
    
]

const router = new VueRouter({
    routes
});

export default router

For the sake of intuitiveness, all other routes are commented out, and only /page1 is left on the page;

As mentioned above, the children attribute is actually a collection of sub-routes, and the sub-routes are placed in the array structure;

The effect diagram is as follows:

There are two ways of routing navigation:

Tag navigation: Tag navigation <router-link><router-link> is to jump by escaping to <a></a> tags, where the to attribute in the router-link tag will be escaped to the href attribute in the a tag;

// Jump to the route named user and pass the parameter userId
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

Programmatic navigation: We can use this.$router.push() to implement programmatic navigation. Of course, we can also implement parameter passing. This kind of programmatic navigation is generally used to jump after a button click.

router.push({ name: 'user', params: { userId: 123 }})

Both of these will navigate the route to the user/123 path

Named routes:

Sometimes, it is more convenient to identify a route by a name, so in order to make it easier for us to be lazy, the official added a name attribute to the route. After naming this attribute, accessing this attribute is equivalent to directly accessing the route;

Normal routing:

router.push({ path: '/user/:userId', params: { userId: 123 }})

Named routes:

router.push({ name: 'user', params: { userId: 123 }})

In fact, there is no difference between the two. They just provide two ways to access the route, which can be matched by path or by alias.

The above is the detailed content of the Vue routing vue-router detailed explanation guide. For more information about Vue routing, please pay attention to other related articles on 123WORDPRESS.COM!