Vueルーティングの使用概要

一、vueにおけるルーティングの使用
1、コンポーネントの定義

export default {
  name: 'hello',
  data () {
    return {
      msg: '  Hello  ',
      color:'color'
    }
  },
  methods:{
      info(){
          console.log('     ');
      }
  }
}

2、ルーティングファイルの設定

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、ルーティングソケットの配置

export default{
    name:'app',
    data(){
        return{
            title:'       '
        }
    }
}

4、ルーティングファイルをmainに注入する.jsファイル

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);
    }
})

二、ルーティングのジャンプを配置する
ルーティングのジャンプラベルrouter-link 1を使用して、パスのジャンプを知っています

    
Hello  
    
word  

2、toはデータを上にバインドする

    
Hello  
    
word  




export default{
    name:'app',
    data(){
        return{
            title:'       ',
            word:'/word'
        }
    }
}

三、サブルートの定義
1、ルーティングジャンプの定義

    
  1
    
  2
    

2、ルーティングのジャンプ

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

四、ルーティング間伝達パラメータparams方式
1、ルーティングジャンプ時に渡すパラメータ形式を定義する

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

2、ページジャンプ時にパラメータを渡す

  1

3、コンポーネントに伝達されたパラメータを受信する

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

五、ルーティング間伝達パラメータquery方式
1、ルーティングジャンプ先でqueryパラメータを渡す

  2

2、コンポーネントのmountedで受け取る

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

六、vueスクリプトにおける操作ページのジャンプと伝達パラメータについて
1、pushによるページジャンプ

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

2、replaceでページのジャンプを実現する

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

七、前進と後退について
1、ページコード

2、イベントメソッドコード

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

八、リダイレクト
1、ルーティングの設定

{
    path:'router',  // path   
    redirect:'/word/router3'  //         
}

2、ページジャンプの設定

  4

3、リダイレクト関数

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

九、ルーティングのフック関数
1、beforeEnterの使用

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

2、beforeRouteUpdateの使用
3、beforeRouteLeaveの使用
十、ルーティング実現コンポーネント間のデータ伝達
1、直接コンポーネントに渡す
1

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

2、コンポーネントMyheadで受け取る

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

3、router-viewに渡す

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