+2
Check điều kiện bằng route params trong vue 3?
Em đang làm trang Dashboard(Sử dụng Vue3) phần khung ban đầu có 1 thanh nav trên và một thanh menu bên phải, và cái router view để điều hướng sẽ ở dưới, nó trông như thế này...
Đây là phần code ở views
<template>
<div class="flex h-screen bg-gray-50 dark:bg-gray-900" id="app">
<Sidebar v-if="checklogin" :isSideMenuOpen="isSideMenuOpen" @close-side-menu="isSideMenuOpen = false" />
<div class="flex flex-col flex-1 w-full">
<Navigation v-if="checklogin" @open-side-menu="isSideMenuOpen = !isSideMenuOpen" />
<div class="p-6 dark:text-white">
<RouterView />
</div>
</div>
</div>
</template>
Em muốn khi là trang đăng nhập thì nó sẽ ẩn nav và thanh menu phải đi nên em đang bắt theo route params như này và rõ là giá trị đúng lúc chạy ban đầu ở trang đăng nhập đã đúng nhưng khi qua trang mới nó lại fail và báo lỗi
Đây là code phần logic ạ
<script setup lang="ts">
import { ref, onMounted, watch} from "vue";
import { useRoute } from 'vue-router'
import "@/assets/main.min.css"
import { RouterView } from 'vue-router'
import Sidebar from './components/Sidebar.vue'
import Navigation from './components/Navigation.vue'
const isSideMenuOpen = ref(false);
const checklogin = ref(true);
const route = useRoute()
let pathName: any = route.matched[0].name
console.log("=>:",pathName)
onMounted(()=>{
if(pathName=='login'){
checklogin.value = false
}
else{
checklogin.value = true
}
})
</script>
Em đang sử dụng : VueJs ver3, Vite, TypeScript Em vừa chuyển qua Vue3 nên cũng chưa nắm rõ lắm mong nhận được sự chỉ dẫn của các cao nhân ạ. ^^
2 CÂU TRẢ LỜI
+2
Như bạn show code ở trên thì component trên bạn đang dùng làm layout và sẽ thực hiện render ra các view tương ứng tại vị trí RouterView. Vấn đề ở đây là khi router sang view khác thì vẫn sử dụng component layout trên và chỉ thay đổi component tại vị trí RouterView. => Component layout sẽ không được int lại => hook onMounted sẽ chỉ chạy lần đầu khi vào ứng dụng Cách xử lý (1trong các cách sau):
- Sử dụng hook updated
- Sử dụng watch
- sử dụng computed
Mình cũng đang lăn tăn đoạn này thanks b nhưng mình có xem qua watch thì thấy cách nó dùng bên vue 3 khá là khác hmm mình sẽ tìm hiểu thằng computed
+2
Cái điều kiện hiển thị Navigation dựa theo path của route thì bạn dùng computed sẽ là hợp lý. Tham khảo code:
<script setup lang="ts">
import { ref, computed} from "vue";
import { useRoute } from 'vue-router';
// ...
const route = useRoute();
const checkLogin = computed(() => route.name === 'login');
</script>
sao em vào đúng path là /login rồi mà value nó vẫn trả là false a nhỉ
@binchanhkun99 Bạn thử check cái route.path xem value nó đang trả về có là /login không hay giá trị nào?
@binchanhkun99 À sr bạn. Bạn đang dùng route name để kiểm tra có phải trang login không mà nhỉ. 
Thế bạn sửa lại cái computed để nó compare với route name nha.
const checkLogin = computed(() => route.name === 'login');
Nó báo lỗi gì vậy bạn?