سوال راجع به vue router
سلام. وقت بخیر. ببخشیدیه سوال راجه به vue داشتم. ممنون میشم راهنمایی بفرمایید. من یه صفحه دارم به نام پروداکت. یک صفحه دارم به نام پیشنهاد ویژه که یکسری محصولات توی اون صفحه هست و دیتابیس خودشو داره و یک صفحه دارم به نام home که یکسری محصولات توی اون صفحه هست و اونم دیتابیس خودشو داره. کاربر توی هر صفحه که میره(چه صفحه home و چه صفحه پیشنهاد ویژه ) روی هر محصول که میزنه ارجاع داده میشه به صفحه پروداکت. من از vue router استفاده کردم برای مدیریت بین صفحات و پاسکاری پارامتر ها بین صفحات. حالا یک مسئله برام پیش اومده اینکه من دو پارامز مختلف که توی دو صفحه مجزا هستن رو دارم پاس میدم به یک name یکسان. نمیدونم چجوری توی پیج product دسترسی داشته باشم به هر دو params?
صفحه special-offer
<div class="col-sm-3" v-for="(product, id) in products" :key="id">
<router-link :to="{name: 'product', params: { product: product, id: product.id }, props: {product: product}}">
<b-card-group>
<b-card :img-src="product.imagePath" img-alt="Image" img-top class="mb-3 card border-0">
<h6 class="card-text">{{ product.name }}</h6>
<del><small class="text-muted">{{ product.base_price }}</small></del>
<div class="small"><span>{{ product.user_price }} تومان </span></div>
<div class="small text-danger">ارسال رایگان</div>
</b-card>
</b-card-group>
</router-link>
</div>صفحه home
<swiper-slide class="product m-2" v-for="newProduct in newProducts" :key="newProduct.id">
<router-link :to="{name: 'product', params: {newProduct: newProduct, id: newProduct.id}, props: {newProduct: newProduct}}">
<div class="row mb-3 mr-3">
<img :src="newProduct.imagePath" :alt="newProduct.name" class="w-75">
</div>
<div class="row mb-4 mr-5 text-muted small shop-item-desc">{{newProduct.name}}</div>
<div class="row d-flex mb-4">
<span class="mr-auto ml-5">
<span class="text-muted ml-2"><del>{{newProduct.base_price}}</del></span>
<!-- <span class="badge badge-pill badge-danger p-2 mb-1">{{product.off}}</span> -->
<span class="d-block shop-item-price">{{newProduct.user_price}}<span class="small mr-1">تومان</span></span>
</span>
</div>
</router-link>
</swiper-slide>پاسخها
10
چه کاریه اسم اونو چرا میزارید newProduct اسم اونم بزارید product مشکل چیه !؟
سلام وقتتون بخیر خوب الان شما چطوری یه پارامتر رو دریافت میکنید که بعد به فکر دومی هستید ؟
از طریق router-link پارامتر هامو میفرستم به این شکل:
<router-link :to="{name: 'product', params: { product: product, id: product.id }, props: {product: product}}">
بعد توی صفحه product ام پارامترهامو دریافت میکنم. به این شکل
<img class="images" :src="'/' + $route.params.product.imagePath">
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
خوب با استفاده از
$route.paramsبه اون یکی اطلاعات هم میتونید تسرسی پیدا کنید دیگه
یعنی توی صفحه product ام بنویسم:
<img class="images" :src="'/' + $route.params.product.imagePath">
<img class="images" :src="'/' + $route.params.newProduct.imagePath">این جوری کثیف کد نوشتن نیست؟ راه بهتری وجود نداره؟
شما روت ابتدای رو کجا تعریف کردید ؟
اون روت ابتدایه رو بفرستید لطفا
import Home from './pages/Home';
import SpecialOffer from './pages/Special-offer';
import Product from './pages/Product';
export default [
{
path: '/',
component: Home,
name: 'home',
},
{
path: '/product/:id',
component: Product,
name: 'product',
},
{
path: '/special-offer',
component: SpecialOffer,
name: 'special-offer',
},این توی routes.js هست
Route::get('/', function(){return view('welcome');});
Route::get('api/new-products', 'NewProductsController@show');
Route::get('special-offer', 'ProductController@show');از این روت هم داده هامو از دیتابیس میگیرم
من الان در روتی که تعریف کردید یعنی
{
path: '/product/:id',
component: Product,
name: 'product',
},دارم میبینم که ارسال id قابل قبول هست ! اما شما در بالا زدید
<router-link :to="{name: 'product', params: { product: product, id: product.id }, props: {product: product}}">یعنی الان دارید روتی که فقط id دریافت میکنه بهش product هم پاس میدید !؟
بله تو صفحه product هم دسترسی به id و هم اطلاعات product ام دارم.
مسئله ای که باهاش مواجهم اینه که تو صفحه product چجوری هم $route.params.product.imagePath" و هم به این $route.params.newProduct.imagePath" دسترسی داشته باشم؟
خیلی ممنونم . مسئله رو خیلی سختش کردم. ممنونم از وقتیکه گذاشتین.