سوال راجع به 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>گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام وقتتون بخیر خوب الان شما چطوری یه پارامتر رو دریافت میکنید که بعد به فکر دومی هستید ؟
از طریق 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">
یعنی توی صفحه 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" دسترسی داشته باشم؟