Giriş yapmadınız.

#1 22.05.2019 14:54:54

loc
Üye
Yer: İstanbul
Kayıtlı: 08.06.2015
Mesajlar: 275
Website

vuejs sayfa değişmeme sorunu

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

Çevrimdışı

#2 22.05.2019 23:42:53

sineld
Yönetici
Yer: Bursa
Kayıtlı: 26.12.2012
Mesajlar: 1,490
Website

Yanıt: vuejs sayfa değişmeme sorunu

Emin değilim ancak

path: i18n.translateIn('hr', 'routes.contact'),

kısmının önüne / eklemeyi dener misiniz?

Çevrimdışı

#3 23.05.2019 07:15:08

loc
Üye
Yer: İstanbul
Kayıtlı: 08.06.2015
Mesajlar: 275
Website

Yanıt: vuejs sayfa değişmeme sorunu

Sinan bey / karakterini kabul etmiyor. Zaten sıkıntı sürekli olmuyor child üyelerde. Şöyle söyleyeyim sadece bulunduğum sayfa eğer bir dropdown menu içerisindeyse o dropdown menu içerisinde sayfalar arası geçiş yapamıyorum. Başka bir dropdown menunun itemlarındam birine tıkladığımda gidebiliyorum. Bu sefer o sayfanın bağlı olduğu dropdown da bu olay başlıyor. Enteresan bir durum yani. Browser da url değiştiği halde neden sayfa değişmez? Bir fikriniz var mı?

Çevrimdışı

#4 23.05.2019 09:13:28

mgsmus
Moderatör
Yer: Mersin
Kayıtlı: 17.08.2013
Mesajlar: 1,703
Website

Yanıt: vuejs sayfa değişmeme sorunu

<router-view></router-view>

Bununla ilgili olabilir mi? Acemi şansı belki tutar smile Dokümanlara baktım, route ile uyuşan component bunun içinde render edilir diyor. URL değişiyor ama sayfa değişmiyorsa, sadece sayfayı komple yenilediğinizde değişiyorsa belki render etmiyordur.

Not: Çok istiyorum Vue öğrenmeyi ama bir türlü zaman bulamıyorum mad

Çevrimdışı

#5 23.05.2019 09:39:07

loc
Üye
Yer: İstanbul
Kayıtlı: 08.06.2015
Mesajlar: 275
Website

Yanıt: vuejs sayfa değişmeme sorunu

mgsmus yazdı:
<router-view></router-view>

Bununla ilgili olabilir mi? Acemi şansı belki tutar smile Dokümanlara baktım, route ile uyuşan component bunun içinde render edilir diyor. URL değişiyor ama sayfa değişmiyorsa, sadece sayfayı komple yenilediğinizde değişiyorsa belki render etmiyordur.

Not: Çok istiyorum Vue öğrenmeyi ama bir türlü zaman bulamıyorum mad

Ben de çok istiyordum fırsat bulamıyordum fakat laravel ile baştan sonra yaptığım siteyi patron akıcı bir sitemiz olsun sayfa geçişleri çok ağır deyince vue ya da angular kullanmam gerektiğine karar verdim. Frontend tarafında yaptığım herşeyi view yerine apiye döktüm. 2 günde vue js ile projenin çoğu kısmını tamamladım. ( Yönetim paneli hariç smile )

Zaten ana componentim olan App.vue içerisinde router-view tanımlı. Burada sıkıntı yok. Normalde çalışmıyor dediğim o menüler çalışıyor. Şöyle anlatayım
-Anasayfa
-Ana Link 1
- -Alt Link 1.1
- -Alt Link 1.2
-- Alt Link 1.3
-Ana Link 2
- -Alt Link 2.1
- -Alt Link 2.2
-- Alt Link 2.3
İletişim

Anasayfa, İletişim veya Ana Link 1 in gittiği sayfada olayım. Açılır menüden Alt Link 1.1 e gidebiliyorum. Eğer Alt link 1.1 e ait sayfadaysam Alt Link 1.2 nin bulunduğu sayfaya gidemiyorum. Tıklıyorum adres satırı doğru bir şekilde değişiyor. Ama sayfa yüklenmiyor. Alt menülerde sıkıntı var desem Alt Link 1.2 deyken Alt Link 2.1 e gidebiliyorum mesela ama buraya gittiğim zamanda Alt Link 2.2 ye geçemiyorum. Yemin ediyorum anlatması bile zor enteresan bir durum. Browserda adres satırına gidip enter dediğimde ya da sayfayı refresh ettiğimde değişen adres açılıyor. Niye böyle birşey yapabilir. Console kısmında bir hata da göremiyorum.

Çevrimdışı

#6 23.05.2019 10:00:12

mgsmus
Moderatör
Yer: Mersin
Kayıtlı: 17.08.2013
Mesajlar: 1,703
Website

Yanıt: vuejs sayfa değişmeme sorunu

Rotaların olduğu yerde window.router = router yazmışsınız ya, orayı export default router şeklinde değiştirip deneyin. Sanki ilk yüklemeden sonra artık router kullanılmıyor gibi. Ben o window.router olayını ilk sizde gördüm. Router'a zaten Vue içinde this.$router şeklinde ulaşamıyor musunuz, window'a eklemenizin sebebi nedir?

Çevrimdışı

#7 23.05.2019 10:05:17

loc
Üye
Yer: İstanbul
Kayıtlı: 08.06.2015
Mesajlar: 275
Website

Yanıt: vuejs sayfa değişmeme sorunu

mgsmus yazdı:

Rotaların olduğu yerde window.router = router yazmışsınız ya, orayı export default router şeklinde değiştirip deneyin. Sanki ilk yüklemeden sonra artık router kullanılmıyor gibi. Ben o window.router olayını ilk sizde gördüm. Router'a zaten Vue içinde this.$router şeklinde ulaşamıyor musunuz, window'a eklemenizin sebebi nedir?

Sorunu buldum. Child sayfalarda route parametreleri yüklendikten sonra route key static hale geliyor. Her dinamik parametre için vue router a ayrı bir rote key oluşturunca sayfanın değişmesi gerektiğini anlıyormuş. Aynı sorunu yaşayan olursa diye alta link bırakıyorum. Teşekkürler yardımlarınız için smile

https://forum.vuejs.org/t/why-does-chan … e/46008/10

Çevrimdışı

Forum alt kısmı