Merhabalar,
Uzun bir aradan sonra tekrar foruma giriş yaptım. İyisinizdir umarım.
Vuejs ve laravel kullanarak bir uygulama geliştiriyorum. Dropdown menülerde ufak bir sıkıntı yaşıyorum.
Örnekle anlatayım:
Anasayfa
Firma
- Hakkımızda
- Misyon
- Vizyon
Çözümler
- Çözüm 1
- Çözüm 2
- Çözüm 3
şeklinde bir menü düşünün. Anasayfa veya Firma sayfasındayken Firmanın alt rotalarına menü üzerinden tıklayarak gidebiliyorum. Yani Firma > Hakkımızda sayfasına girdiğimizi düşünelim. Hakkımızda sayfasındayken tekrar ana menüden Firma > Misyon sayfasına gitmeye kalktığımda browserda adres satırı değişiyor ama sayfa değişmiyor. Sayfayı yenilediğimde istediğim sayfa yükleniyor. Aynı şey Çözümler sayfası için de geçerli. Enteresan bir durum söz konusu. Şimdilik window.location ile bir çözüm buldum ama bu tabii ki istemediğim bir durum. Acaba nerede hata yapıyorum bir fikri olan var mı?
Navbar:
<template>
<ul class="navbar-nav">
<li>
<router-link tag="a" :to="{name: 'home', params: { locale: $i18n.locale() }}" v-html="$t('nav.home')" exact-active-class="active" class="nav-link"></router-link>
</li>
<li class="dropdown">
<router-link tag="a" :to="{name: $i18n.locale() + '.company', params: { locale: $i18n.locale() }}" v-html="$t('nav.company')" exact-active-class="active" class="dropdown-toggle nav-link" data-toggle="dropdown"></router-link>
<div class="dropdown-menu">
<navbar-sub v-for="subs in companyList" :key="subs.id" :subs="subs" :path="companyPath"></navbar-sub>
</div>
</li>
<li class="dropdown">
<router-link tag="a" :to="{name: $i18n.locale() + '.solution', params: { locale: $i18n.locale() }}" v-html="$t('nav.solution')" exact-active-class="active" class="dropdown-toggle nav-link" data-toggle="dropdown"></router-link>
<div class="dropdown-menu">
<navbar-sub v-for="subs in solutionList" :key="subs.id" :subs="subs" :path="sectionPath"></navbar-sub>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle nav-link" href="#" data-toggle="dropdown">{{ $i18n.locale() }}</a>
<div class="dropdown-menu">
<translate></translate>
</div>
</li>
</ul>
</template>
<script>
import Translate from '../components/Translate.vue';
import NavbarSub from '../layouts/NavbarSub.vue';
import { mapGetters } from 'vuex';
export default {
data() {
return {
sectionPath: "solutionDetails",
companyPath: "companyDetails",
}
},
components:{
Translate,
NavbarSub
},
computed: {
companyList(){
return this.$store.getters.COMPANY
},
solutionList(){
return this.$store.getters.SOLUTIONS
}
},
watch: {
'$route.params.id': function (id) {
if(id != null){
window.location = this.$route.path;
}
}
},
mounted(){
this.$store.dispatch('GET_NAVIGATION')
}
};
</script>
Navbar Sub:
<template>
<div>
<ul>
<li v-for="sub in subs.translations" :key="sub.id">
<div v-if="sub.locale == $i18n.locale()">
<router-link tag="a" :to="{name: $i18n.locale() + '.' + path, params: { locale: $i18n.locale(), id: sub.slug }}" class="dropdown-item nav-link nav_item">{{ sub.name }}</router-link>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: [
'subs',
'path'
]
}
</script>
Rotalarım:
const routes = [
{
path: '/',
name: 'home',
component: Home,
alias: '/:locale'
},
{
path: '/en',
component: Page,
children: [
{
path: i18n.translateIn('en', 'routes.company'),
name: 'en.company',
component: Company,
},
{
path: i18n.translateIn('en', 'routes.company') + '/:id',
name: 'en.companyDetails',
component: PageDetails,
},
{
path: i18n.translateIn('en', 'routes.solution'),
name: 'en.solution',
component: Solution,
},
{
path: i18n.translateIn('en', 'routes.solution') + '/:id',
name: 'en.solutionDetails',
component: SolutionDetails,
},
{
path: i18n.translateIn('en', 'routes.contact'),
name: 'en.contact',
component: ContactPage
}
]
},
{
path: '/tr',
component: Page,
children: [
{
path: i18n.translateIn('tr', 'routes.company'),
name: 'tr.company',
component: Company
},
{
path: i18n.translateIn('tr', 'routes.company') + '/:id',
name: 'tr.companyDetails',
component: PageDetails,
},
{
path: i18n.translateIn('tr', 'routes.solution'),
name: 'tr.solution',
component: Solution
},
{
path: i18n.translateIn('tr', 'routes.solution') + '/:id',
name: 'tr.solutionDetails',
component: SolutionDetails,
},
{
path: i18n.translateIn('hr', 'routes.contact'),
name: 'tr.contact',
component: ContactPage
}
]
}
]
const router = new VueRouter({
mode: 'history',
routes
})
window.router = router
