Vue3で現在のURLがうまく取得できない
Q&A
Closed
Vue3をさわり始めた赤ちゃんです。
Vite + Vue3 + TypeScriptで開発しています。
やりたいこと
現在のURLを取得し、パスが想定通りだとtrue想定外だとfalseを出力したい。
発生している問題
現在のURLを取得するところで、なぜか"/"のみが取得される。
/portalでリロードしても取得できるパスは"/"になってしまう。
解決したいこと
URLが変わったタイミングで現状のURLパスを取得したい。
ソースは下記です。有識者の方のお力を貸していただきたいです。
稚拙な質問かもしれませんがお願いいたします。
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute();
console.log(route.path); //リロードタイミングでも"/"が出力される
const isPortal = ref(route.path.match('/portal'));
watchEffect(() => {
console.log(isPortal); //ホーム、履歴のリンクを押すたびに出力される想定
})
</script>
<template>
<div class="MenuPc_Inner">
<div class="MenuPc_UserArea"><!----></div>
<nav class="NavPc">
<ul>
<li class="NavPcBtn">
<router-link to="/portal">
<i class="NavPcBtn_Icon icon IconFaucet"></i>
<div class="NavPcBtn_TxtWrapper">
<span class="NavPcBtn_Txt">ホーム</span>
</div>
<!---->
<!---->
</router-link>
</li>
<li class="NavPcBtn _active">
<router-link to="/list">
<i class="NavPcBtn_Icon icon IconInfo"></i>
<div class="NavPcBtn_TxtWrapper">
<span class="NavPcBtn_Txt">履歴</span>
</div>
<i class="NavPcBtn_TopRadius"></i>
<i class="NavPcBtn_BottomRadius"></i>
</router-link>
</li>
</ul>
</nav>
</div>
</template>
0