vue-router 4 の使用例の詳しい説明

vue-router@4 を npm でインストールします 

または yarn add vue-router@4

「依存関係」: {
 "vue": "^3.2.16",
 "vue-ルーター": "4"
},

「vue-router」から createRouter、createWebHashHistory をインポートします。

定数ルート = [
 {
  パス：''、
  コンポーネント:()=>import("../views/login/index.vue")
 },
 {
  パス:'/home',
  コンポーネント:()=>import("../views/home/index.vue")
 }
]

const ルーター = createRouter({
 履歴:createWebHashHistory('/')、
 ルート
})

デフォルトルーターをエクスポートする

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
「./router/index」からルーターをインポートします。

const app = createApp(App)
app.use(ルーター)
app.mount('#app')

//ルートを動的に追加します。デフォルトではルートに追加します。router.addRoute({
 パス:'/my',
 名前:'私の',
 コンポーネント:()=>import("../views/my/index.vue")
})

//サブルートを動的に追加 router.addRoute('my',{
 パス:'/info',
 コンポーネント:()=>import("../views/my/info.vue")
})

<テンプレート>
  <button @click="backToHome">ホームページへ移動</button>
</テンプレート>

<スクリプト>
「vue-router」から useRouter をインポートします。
エクスポートデフォルト{
 設定（）{
  定数ルーター = useRouter()
  戻る {
   ホームに戻る(){
    ルータ.push("/")
   },
  }
 }
}
</スクリプト>

<テンプレート>
  <div>ルートの変更を監視する</div>
</テンプレート>

<スクリプト>
「vue-router」から useRouter,useRoute をインポートします。
"@vue/runtime-core" から {watch} をインポートします。
エクスポートデフォルト{
 設定（）{
  定数ルート = useRoute()
  //route は変更を監視できるレスポンシブ オブジェクトです watch(()=>route.query,query=>{
   console.log('最新',クエリ)
  })
 }
}
</スクリプト>

router.beforeEach((to,from,next)=>{
 console.log('グローバルフロントガード');
})
router.afterEach((to,from)=>{
 console.log('グローバルポストフック');
})

ルータ.addRoute({
 パス:'/my',
 名前:'私の',
 コンポーネント:()=>import("../views/my/index.vue"),
 beforeEnter:(to,from)=>{
  console.log('ルート排他ガード');
 }
})

<スクリプト>
「vue-router」から { onBeforeRouteLeave } をインポートします。
エクスポートデフォルト{
 設定（）{
 onnBeforeRouteLeave((to,from)=>{
  const answer = window.confirm('本当に終了してもよろしいですか?')
  if(答え){
   console.log('離れないでください');
   偽を返す
  }
  })
 }
}
</スクリプト>

//以前の作成方法 const router = new VueRouter({
 
})
新しいVue({
 ルーター、
 レンダリング:h=>h(アプリ)
}).$mount("#app")

//vue-router4 作成メソッド import { createRouter } from "vue-router"
const ルーター = createRouter({

})
createApp(App).use(router).mount("#app")

//前 const router = new VueRouter({
 モード:"ハッシュ"
})

// 新しい import { createRouter, createWebHashHistory } from "vue-router"
const ルーター = createRouter({
 履歴:createWebHashHistory()
})

//前 const router = new VueRouter({
 ベース："/"
})

// 新しい import { createRouter, createWebHashHistory } from "vue-router"
const ルーター = createRouter({
 履歴:createWebHashHistory('/')
})

//前に{
 パス：'*'、
 コンポーネント:()=>import("../components/NotFound.vue")
}

//vue-ルーター4
{
 パス:'/:pathMatch(.*)*',
 コンポーネント:()=>import("../components/NotFound.vue")
}
// は正規表現です

// router.onReady(onSuccess, onError) の前 // 成功と失敗のコールバック //vue-router 4
router.isReady().then(()=>{
 //成功}).catch(err=>{
 //失敗}）

const ルーター = createRouter({
 scrollBehavior(to, from, savedPosition) {
  // 常に一番上までスクロールします return { top: 0, left:0 }
 },
})
// 以前の { x:0, y:0 } は { top: 0, left:0 } に置き換えられます

//<keep-alive> の前
 <ルータービュー />
</キープアライブ>

//vue-ルーター4
<ルータービュー v-slot="{コンポーネント}">
 <キープアライブ>
  <コンポーネント:is="コンポーネント" />
 </キープアライブ>
</ルータービュー>

//<router-link to="child" append > の前に <router-link> にジャンプします

//vue-ルーター4
<router-link :to="append( $route.path , 'child' )" append > <router-link> にジャンプ

//<router-link to="/" tag="span">ジャンプ</router-link>の前

//vue-ルーター4
<router-link to="/" カスタム>
 <span>ジャンプ</span>  
</ルーターリンク>