Vue再学習5_ルーティングrouterの使用

Vue再学習5_ルーティングrouterの使用
routerの導入
1:ダウンロードnpm i vue-router -S2:main.jsにimport VueRouter from 'vue-router';を導入
3:取付カードVue.use(VueRouter);設定

// 1、  home.vue




// 2、 main.js   
let router1 = new VueRouter({
  routes:[
    {
      path:'/home',
      component:Home
    }
  ]
});
//    vue    index.js  router
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//     
import Home from '../components/Home.vue'
import Movie from '../components/Movie.vue'
import Music from '../components/Music.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/home',
      component:Home
    },
    {
      path:'/music',
      component:Music
    },
    {
      path:'/movie',
      component:Movie
    }
  ]
})


// 3、main.js Vue     
new Vue({
  el: '#app',
  router:router1,
  components: { App },
  template: ''
})

// 4、 app.vue          
 

注意:
私たちのwindowに対応するリスニングを追加しました:window.addEventListener('hashchange',fn); をDOMの標識として置くと
最終的にアンカー値がhashchangeをトリガするコールバック関数を変更すると、指定したテンプレートデータをDOM識別子に挿入します.
クリックリンクの設定

// 1、  a      
ホームページ
  に る
  を う

// 2、  name    
  home
    
    

//   ，   routes       name
{
  name:'home',
  path:'/home',
  component:Home
},
{
   name:'music',
   path:'/music',
   component:Music
},
{
   name:'movie',
   path:'/movie',
    component:Movie
}

义齿
义齿

 // 1、     query
   home

// 2、    ， created      this.$route.query  
 created() {
   console.log(this.$route.query)
 }

注意:queryのパラメータは最終的にurlに渡されます.
params伝参

  // 1、     params
     

// 2、    ， created      this.$route.query  
 created() {
   console.log(this.$route.params.data);
 }

区別する
queryはajaxでgetパラメータに似ていますが、paramsはpostに似ています.もっと簡単に言えば、前者はブラウザのアドレスバーにパラメータを表示し、後者は表示しません.
注意:
queryリフレッシュqueryのデータparamsリフレッシュはparamsのデータを失うことはありません
routerスタック管理
义齿

// 1、      ，  push    

         


methods:{
  goMusic(){
  	this.$router.push('music')
  }
},

routeは次のページに戻ります

// 2、          
this.$router.go(-1); //      
this.$router.go(1);  //      

1ページマルチrouteの構成

//  app.vue      

  
  
  

名前のないviewの場合、名前のデフォルトはdefaultです.

//  router         conponent
{
  name:'home',
  path:'/home',
  components:{
    header:Music,
    default:Home,
    footer:Movie,
  }
},
{
  name:'music',
  path:'/music',
  component:Music
},

注意:では、名前がない場合はdefaultです.
利点:ローカルレイアウトが頻繁に変化するインタフェースでは、インタフェースの大部分が再レンダリングする必要がないため、マルチルーティング構造を採用するとリソースが節約されます.
ネストされたルーティング構成

// 1、 route       
{
  name:'music',
  path:'/music',
  component:Music,
  children:[
  {
      name:'oumei',
      path:'/oumei',
      component:Oumei
    },
    {
      name:'guochan',
      path:'/guochan',
      component:Guochan
    }
  ],
}

// 2、              

    music
       
      
  

注:パスpathは、親パスに対する相対パスです.