preface

Hello, everyone. I haven’t seen you for a week, but I am still late because I have something to do these days. All right, don’t worry about that. Today we are going to talk about vue-Router.

Brief introduction to vue-Router application

Vue Router is the official routing manager for vue. js. Its deep integration with vue.js core makes building single-page applications a breeze.

Is it very clear, to put it bluntly is the management of the route and the management between the jump components, well can not say so much, we want to understand or go to see the official document, today need to talk about internal use some more, so I will not waste time here.

So here’s the code

// Install vue-router NPM install vue-router --save CNPM install vue-router --saveCopy the code

Now create a folder named router under SRC and create index.js in it.

// Import the vue-router file import Vue from'vue'
import Router from 'vue-router'// Introduce vue-router to vue. use(router)export default new Router({
    routes: [
    
    ]
})
Copy the code

Reference vue-router in main.js

. import router from'./router'. . new Vue({ ... router ... })...Copy the code

Now let’s implement a simple vue-router. Let’s create a homepage.vue in index

import Vue from 'vue'
import Router from 'vue-router'// Import homepages from here'.. /homepage/homepage'
Vue.use(Router)
exportDefault new Router({routes: [//'homepages',name:'Homepages',component:homepages}
    ]
})
Copy the code

Start the NPM run dev on the browser view can see the http://localhost:8080/homepages

Vue-router jumps are introduced in the following sections. There are several ways to jump to a router

// Router-link <router-link :to="{name:'Homepages'}"> </router-link>$router.push({path: '/homepages'}) // The third return method is this.$router.go(-1)
Copy the code

This is the basic way to jump. To see more ways to jump, please go to the official website to see the API.

Vue-router Indicates the forward route

Now that I’ve talked about the jump method, I’m going to talk about nested routines and nested routines

Embedded routines by

In real life, application interfaces are usually composed of multiple layers of nested components. With vue-Router, this relationship can be easily expressed using nested routines.

Create the notlogin. vue file that is used to hold the login component in index

. import Notlogin from'.. /login/Notlogin'.exportDefault new Router({routes: [//'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
         
            ]
         }
    ]
})
Copy the code
//Notlogin.vue
<template>
    <div>
       <router-view/>
    </div>
</template>
Copy the code

This is successful, and login.vue is created

<template>

</template>
<script>
    export default {
        name:'login',
        data:function () {
        
        }
    }
</script>    
Copy the code

In index

. import Notlogin from'.. /login/Notlogin'
import Login from '.. /login/Login'.exportDefault new Router({routes: [//'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
            {path: 'login', name: 'Login', component: Login},
         ]
         }
    ]
})
Copy the code

Redirect is a great way to redirect to other modules. You can check it out and see how it works. Next create pageshome_view.vue to hold homepages. Vue to form a nested pattern of Homepages by

import pageshome_view from  '.. /pages/pageshome_view'
import homepages from '.. /homepage/homepage'
import Notlogin from '.. /login/Notlogin'
import Login from '.. /login/Login'.export default new Router({
    routes: [
        {path:'/',redirect:'/homepages',component:pageshome_view,children:[
            {path:'homepages',name:'Homepages',component:homepages},
        ]},
         {path:'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
            {path: 'login', name: 'Login', component: Login},
         ]
         }
    ]
})
Copy the code

And that’s it. Now that we have a nested pattern, let’s look at the jump

//homepages.vue
<template>
    <div>
     <router-link :to="{ name: 'Login'}"</router-link> </div> </template>Copy the code

So we can jump to login.vue. Let’s talk about dynamic route passing

Dynamic route parameter transmission

We often need to map all the routes that a pattern matches to the same component. For example, we have a User component that is used to render for all users with different ids. We can use dynamic segments on vue-Router routes to achieve this effect.

Now we know that we can use dynamic routing to send parameters, but how we do that depends on how we do it. Let’s do a simple way, not a complicated way, but code first.

//homepages.vue
<template>
    <div>
     <router-link :to="{ name: 'Login',params :{ids:Logins}}"</router-link> </div> </template>Copy the code
//index.js
import pageshome_view from  '.. /pages/pageshome_view'
import homepages from '.. /homepage/homepage'
import Notlogin from '.. /login/Notlogin'
import Login from '.. /login/Login'.export default new Router({
    routes: [
        {path:'/',redirect:'/homepages',component:pageshome_view,children:[
            {path:'homepages',name:'Homepages',component:homepages},
        ]},
         {path:'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
            {path: 'login/:ids', name: 'Login', component: Login},
         ]
         }
    ]
})
Copy the code

You can see that /:ids is the parameter we need to pass.

//login.vue
<template>
    <div>
    {{logoin_size}}
    </div>
</template>
<script>
    export default {
        name:'login',
        data:function () {
            return{}},created(){
            this.logoin_size=this.$route.params.ids
        }
    }
Copy the code

So we’re going to pass the parameters through Params and then we’re going to accept the parameters through Params, and of course Params can take multiple parameters so don’t worry about that.

After all, I still have my own affairs, but I still hope that you can criticize and correct my shortcomings. Thank you.