発生中の問題
Vueで別のページに遷移したく、ナビゲーションドロワー内のリストアイテムにリンクを設定しました。
狙い通り画面は正しく遷移したのですが、アドレスバーのURLがそのままとなっておりました。
/test/dashboard → /test/settings に変わって欲しい
アドレスバーのURLも書き換わってほしいのですが、どうすれば解決するかがわからず、困っています。
環境
- Node.js
- Vue2
- Vue Router
- Vuetify
ナビゲーションのソースコード
vue
<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のコード
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の内容
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')
補足情報
解決のために他に必要な情報があれば開示致します。
お忙しい中申し訳ありませんが、お力をいただければ幸いです。
まだ回答がついていません
会員登録して回答してみよう