I. use of routes in vue

1. Define components

<template>
  <div class="hello">
    <h1 @click="info" :class="color">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'I am Hello assembly',
      color:'color'
    }
  },
  methods:{
      info(){
          console.log('You clicked on me');
      }
  }
}
</script>

<style>
    .color{
        color:#630;
    }
</style>

2. Configure routing file

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Word from '@/components/Word';
Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            component: Hello
        },
        {
            path:'/index',
            component:Word
        }
    ]
})

3. Configure routing socket

<template>
  <div id="app">
    <!--Constant content can be defined-->
    <h3>{{title}}</h3>
    <!--Define routing socket-->
    <router-view></router-view>
    <!--Constant content can be defined-->
  </div>
</template>

<script>
export default{
    name:'app',
    data(){
        return{
            title:'I am the main entrance of the project'
        }
    }
}
</script>

4. Inject route file into main.js file

import Vue from 'vue';
import Router from 'vue-router';
import App from './App';
import router from './router/index';


Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    render(h){
        return h(App);
    }
})

2. Configure route jump

Use the label router link to jump the route
1. Know the jump of the path

<ul>
    <li><router-link to="/">Hello page</router-link></li>
    <li><router-link to="/word">word page</router-link></li>
</ul>
<!-- Define routing socket -->
<router-view></router-view>

2. To is to bind data to

<ul>
    <li><router-link to="/">Hello page</router-link></li>
    <li><router-link :to="word">word page</router-link></li>
</ul>
<!-- Define routing socket -->
<router-view></router-view>
<script>
export default{
    name:'app',
    data(){
        return{
            title:'I am the main entrance of the project',
            word:'/word'
        }
    }
}
</script>

3. Define sub route

1. Define route jump

<ul>
    <li><router-link to="/word/router1">Route 1</router-link></li>
    <li><router-link to="/word/router2">Route 2</router-link></li>
    <router-view></router-view>
</ul>

2. Route jump

{
    path:'/word',
    component:Word,
    children:[
        {
            path:'router1',
            component:Router1
        },
        {
            path:'router2',
            component:Router2
        }
    ]
}

4. params mode of transferring parameters between routes

1. Define the parameter form to be passed when the route jumps

{
    path:'router1/:id',
    component:Router1
},

2. Transfer parameters when the page jumps

<!--123 That's what's going on. id value-->
<li><router-link to="/word/router1/123">Route 1</router-link></li>

3. Receive the parameters passed in the component

export default{
    mounted(){
        console.log(this.$route);
        console.log(this.$route.params.id);
    }
}

V. query mode of parameter transfer between routes

1. Pass the query parameter at the route jump place

<li><router-link v-bind:to="{path:'/word/router2',query:{id:123}}">Route 2</router-link></li>

2. Receive in the mounted component

export default{
    mounted(){
        console.log(this.$route);
        console.log(this.$route.query.id);
    }
}

Vi. jump and transfer parameters of operation page in vue script

1. Use push to realize page Jump

methods:{
    go1(){
        // Passing parameters using params
        this.$router.push({path:'/word/router1/123'});
    }
}

2. Use replace to jump pages

methods:{
    go2(){
        // Using query to pass parameters
        this.$router.replace({path:'/word/router2',query:{id:123}});
    }
}

7. About forward and backward

1. Page code

<input type="button" value="Forward" @click="next"/>
<input type="button" value="Backward" @click="prevent"/>

2. Event method code

methods:{
    next(){
        this.$router.go(1);
    },
    prevent(){
        this.$router.go(-1);
    }
}

VIII. Redirection

1. Configure route

{
    path:'router',  // Path path 
    redirect:'/word/router3'  // Redirect to
}

2. Configure page Jump

<li><router-link to="/word/router">Route 4</router-link></li>

3. Redirection function

{
    path:'router5',
    redirect:()=>{
        console.log(arguments);
        return '/word/router3';
    }
}

IX. hook function of routing

1. Use of beforeEnter

{
    path:'router2',
    component:Router2,
    beforeEnter(to,form,next){
        console.log('///',arguments);
        setTimeout(()=>(next()),1000);
    }
},

2. Use of beforeRouteUpdate

3. Use of beforeroutleave

X. routing to transfer data between components

1. Direct transfer to components

<Myhead v-bind:name1="name1"></Myhead>
1

<script>

    import Myheadfrom '@/components/Myhead';
    export default{
        name:'app',
        data(){
            return{
                name1:'Zhang San'
            }
        },
        components:{
            Myhead
        }
    }
    </script>

2. Received in component Myhead

export default{
    props:['name1'],
}

3. Transfer to the router view

<router-view v-bind:age="age"></router-view>

export default{
    name:'word',
    props:['age'],
}

Reprint: https://segmentfault.com/a/1190000014441507