vueで画面は変わるがアドレスバーの内容が変わらない

Question

発生中の問題

Vueで別のページに遷移したく、ナビゲーションドロワー内のリストアイテムにリンクを設定しました。
狙い通り画面は正しく遷移したのですが、アドレスバーのURLがそのままとなっておりました。

/test/dashboard → /test/settings に変わって欲しい

アドレスバーのURLも書き換わってほしいのですが、どうすれば解決するかがわからず、困っています。

環境

• Node.js
• Vue2
• Vue Router
• Vuetify

ナビゲーションのソースコード

<template>
  <div>
    <v-app-bar
      app
      color="gray"
      dark
    >
      <div class="hidden-lg-and-up">
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      </div>

      <v-toolbar-title>foo</v-toolbar-title>
    </v-app-bar>

    <v-navigation-drawer
      v-model="drawer"
      app
    >
      <v-list>
        <v-list-item
          v-for="[icon, text, target] in links"
          :key="icon"
          :to="target"
          link
        >
          <v-list-item-icon>
            <v-icon>{{ icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>

<script>
  export default {
    data: () => ({
			drawer: null,
			links: [
				['mdi-view-dashboard','ダッシュボード', '/test/dashboard'],
				['mdi-settings', '設定', '/test/config']
			],
		}),
  }
</script>

router/index.jsのコード

import Vue from 'vue'
import VueRouter from 'vue-router'
import TopPage from '../views/TopPage.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'TopPage',
    component: TopPage
  },
  {
    path: '/test/dashboard',
    name: 'TestDashBoard',
    component: () => import('../views/Test/DashBoard.vue')
  },
  {
    path: '/test/settings',
    name: 'TestSettings',
    component: () => import('../views/Test/Settings.vue')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

main.jsの内容

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router'

Vue.config.productionTip = false

new Vue({
  vuetify,
  router,
  render: h => h(App)
}).$mount('#app')

補足情報

解決のために他に必要な情報があれば開示致します。
お忙しい中申し訳ありませんが、お力をいただければ幸いです。

Answer 1

本件について、VSCodeのプレビュー機能でしか発生していないことに気が付きました。
それはそれで若干困ってはいるのですが、ChromeやSafari、Edgeでページを確認したところ、正しくアドレスバーが書き換わっているので、問題ではなかったとし、自己解決をしたとさせていただきます。
ご覧いただいた方、ありがとうございました。