ルーターの設定を記述するファイル router/index.ts
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/profile",
name: "profile",
component: ProfileView,
},
// リダイレクトさせる場合
{
path: "/",
redirect: "/mypage",
},
// 特定のパラメーター (例:isGuest) を渡す 場合
{
path: "/login",
name: "Login",
component: LoginView,
meta: { isGuest: true },
},
],
});
const aughGuard = () => {
if (認証チェック){
next();
return;
}
next({ path: "/login" });
}
// ルーティング前に認証チェックを実行
router.beforeEach((to, from, next) => {
authGuard(to, next);
});
<template>
<router-link to="/about">Go to About</router-link>
</template>
<button class="btn" @click="$router.push('/login')">戻る</button>
nameで指定する場合
import { useRouter } from "vue-router";
const router = useRouter();
await router.push({ name: "Login" });
pathで指定する場合
import { useRouter } from "vue-router";
const router = useRouter();
await router.push("/login");
/ の下に /child1 /child2 を子画面として追加する
src/router/index.ts
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "/",
name: "home",
component: HomeView,
children: [
{
path: "/child1",
components: {
default: Child1View,
},
},
{
path: "/child2",
components: {
default: Child2View,
},
},
],
}
],
});
親の src/views/HomeView.vue に 子画面用の router-view を追加します
src/views/HomeView.vue
<template>
<div class="container">
<h1>Home</h1>
<router-view></router-view>
</div>
</template>
これで、 /child1 , /child2 を表示しているときは HomeView.vueはアンマウントされません。
引用: https://qiita.com/azukiazusa/items/9f467fdea7298baf3476
useRouter()・useRoute()に置き換える
ルーターオブジェクトを得るためには、vue-rouerからuseRouterまたはuseRoute関数をインポートします。それぞれの関数は以下のように対応しています。
Options API | Composition API |
---|---|
this.$router | useRouter |
this.$route | useRoute |
src/router/index.ts
router.beforeEach((to, from, next) => {
// from.name が取得できる時はパスを保存。できないときは "" を保存
sessionStorage.setItem("referrer", from.name ? from.path : "");
authenticate(to, next);
});
各コンポーネント
function isPageReload() {
return sessionStorage.getItem("referrer") === "";
}
if isPageReload(){
alert("reloadです");
}
とすれば検知できます。
https://github.com/vinicius73/vue-page-title#vue-router-integration
https://router.vuejs.org/guide/advanced/scroll-behavior.html