vueでのルーティングrouter切り替え

一.簡単なルーティング切り替えを実現
フロントエンドルーティングはhash値を用いる切り替えられ、単一ページアプリケーションvueにおけるrouterの簡単な使用に適している.vue-routerをダウンロードします.jsとインストール
yard add vue-router
2.ルーティングインスタンスの登録
const router=new VueRouter({routes:[ルーティング規則に一致]})

この登録されたルーティングをvueインスタンス

に追加する.
let vm=new Vue({el:「#app」,data:{},routerここではes 6構文})
4.router-viewによるページへの参照
aラベルの代わりにvueでよくlinkを使用します
router-linkのデフォルトはaラベルで、ページには実際にaラベルがルーティングジャンプ機能を実現していることが示されています.
ログイン
tagでデフォルトラベルを変更できます
ログイン
ルーティングリダイレクトredirect
ルートラベル、リダイレクト、デフォルトでコンポーネントが表示されます
{ path: ‘/’, redirect: ‘/login’ }
現在の要素をハイライト表示
router-link-active現在の要素のcssスタイルを設定
クラス名をカスタマイズすることもできます
登録ルーティングでの設定:linkActiveClass:「myclass」
ルーティング切替におけるtransitonの使用
ルートはアニメーションを切り替えて、transtionで包んで、使い方は前のtransitionアニメーションと一致します
ルーティングパラメータ
1.疑問符伝参

<router-link to='/login?id=20'>  router-link>

取得時にthis.$route.query.id取得パラメータ
2.変数名の参照

//           
<router-link to='/register/80/wang'>  </router-link>
//     
{ path: '/register/:id/:name', component: register }

取得時にthis.$route.params取得パラメータ
完全な例

//         
/* .router-link-active{
            background: orange;
            color: #fff;
            font-size:26px;
} */
        .myclass{ //        
            background: orange;
            color: #fff;
            font-size:26px;
        }

    <div id="app">
        <router-link to='/login?id=20'>  router-link>
        <router-link to='/register/80/wang'>  router-link>
        
        
        <transition name="fade" mode="out-in">
            <router-view>router-view>
        transition>
    div>

jsコード

const login = {
           template: "
    
"
      }
const register = {
           template: "
    
"
       }

const router = new VueRouter({//           
          routes: [//            
          	  { path: '/', redirect: '/login' },
              { path: '/login', component: login },
              { path: '/register/:id/:name', component: register }
          ],
          linkActiveClass:"myclass"   //      
     })

 let vm = new Vue({
       el: "#app",
       data: {},
       created(){
                // ?    
                // console.log(this.$route.query.id)
                // :+        
                console.log(this.$route.params)
            },
       router:router //            vue   
   })

二.ルートネストchildren
サブルーティングはchildrenを使用してマッチングします

//html  
<router-link to='/accont/login'>  </router-link>

// js  
const router = new VueRouter({
   routes: [
        { path: '/', redirect: '/accont' },
        {
            path: "/accont", component: accont,//    
                children: [//    
                    //   ：        /，/      
                   { path: 'login', component: login }, 
                   { path: 'register', component: register }
                 ]
            }
        ]
 })

三.名前付きビュー
サブルーティングは親ルーティングにネストでき、と書くだけでよいが、複数の同級ルーティングが同じページ/同じパスの下にある場合、どのように処理すればよいのだろうか.vueはビューを名前で区別する方法を提供します.デフォルトビューにはdefaultの名前が付けられており、一般的にはデフォルトでは書かれていません.

<router-view>router-view>   
<router-view name="left">router-view>  
<router-view name="right">router-view>

ルートを登録するときは、ルートパスの下に、異なるコンポーネントを分割し、異なる名前を付けて、自分で定義すればいいです.defaultデフォルトネーミング:コンポーネントname:componentネーミングの後にコンポーネント名が付いています.「」を付けないでください.ネーミングは上のビューのnameに対応

const router = new VueRouter({
    routes: [
        {
            path: '/', components: {
                default: head,  // default      
                left:left      // name : component
                right:right
               }
        }
     ]
})