[英]on-click method on a button that directs to another component
我有一個帶有搜索欄的主應用程序頁面組件。 返回的搜索結果在卡片中,我希望設置一個“單擊此處查看更多詳細信息”,將放置在每張卡片中。 它將鏈接到單擊的一個結果的詳細信息頁面。 如何在 Vue 上鏈接這些組件以及是否可以傳遞 id? 我希望單擊按鈕后,組件會呈現在同一頁面上,而不是新選項卡上。
謝謝!
應用程序.vue
<template>
<div id="app">
<Header/>
<SearchForm v-on:search="search"/>
<SearchResults
v-if="results.length > 0"
v-bind:results="results"
v-bind:reformattedSearchString="reformattedSearchString"/>
<Pagination
v-if="results.length > 0"
v-bind:prevPageToken="api.prevPageToken"
v-bind:next_page="api.scrollId"
v-on:prev-page="prevPage"
v-on:next-page="nextPage"
/>
</div>
</template>
<script>
import Header from './components/layout/Header';
import SearchForm from './components/SearchForm';
import SearchResults from './components/SearchResults';
import Pagination from './components/Pagination';
import Details from './components/Details'
import axios from 'axios';
export default {
name: 'app',
components: {
Header,
SearchForm,
SearchResults,
Pagination,
Details
},
data() {
return {
results: [],
reformattedSearchString: '',
api: {
baseUrl: 'https://test.org/api/v1/articles?',
max: 25,
q: '',
prevPageToken: '',
scrollId: ''
}
};
},
methods: {
search(searchParams) {
this.reformattedSearchString = searchParams.join(' ');
this.api.q = searchParams.join('+');
const { baseUrl, q, max} = this.api;
const apiUrl = `${baseUrl}&term=${q}&title_like=${q}&recent&max=${max}&full_results`;
this.getData(apiUrl);
},
prevPage() {
const { baseUrl, q, max, prevPageToken } = this.api;
const apiUrl = `${baseUrl}&term=${q}&title_like=${q}&max=${max}&pageToken=${prevPageToken}`;
this.getData(apiUrl);
},
nextPage() {
const { baseUrl, q, max,scrollId } = this.api;
const apiUrl = `${baseUrl}&term=${q}&title_like=${q}&max=${max}&recent&full_results&scroll_id=${scrollId}`;
this.getData(apiUrl);
},
getData(apiUrl) {
axios
.get(apiUrl)
.then(res => {
this.results = res.data.success.data;
this.api.prevPageToken = res.data.success.data.prevPageToken;
this.api.next_page = res.data.scrollId;
})
.catch(error => console.log(error))
}
}
};
</script>
搜索結果.vue
<template>
<div class="container mb-3">
<div class="d-flex mb-3">
<div class="mr-auto">
<h3>Search Results for "{{ reformattedSearchString }}"</h3>
</div>
<div class="btn-group ml-auto" role="group">
<button
@click="changeDisplayMode('grid')"
type="button"
class="btn btn-outline-secondary"
v-bind:class="{ active: displayMode === 'grid' }"
>
<i class="fas fa-th"></i>
</button>
<button
@click="changeDisplayMode('list')"
type="button"
class="btn btn-outline-secondary"
v-bind:class="{ active: displayMode === 'list' }"
>
<i class="fas fa-list"></i>
</button>
</div>
</div>
<div class="card-columns" v-if="displayMode === 'grid'">
<div class="card" v-bind:key="result._gddid" v-for="result in results">
<ArticleGridItem v-bind:result="result"/>
</div>
</div>
<div v-else>
<div class="card mb-2" v-bind:key="result._gddid" v-for="result in results">
<ArticleListItem v-bind:result="result"/>
</div>
</div>
</div>
</template>
<script>
import ArticleListItem from './ArticleListItem';
import ArticleGridItem from './ArticleGridItem';
import Details from './Details';
export default {
name: 'SearchResults',
components: {
ArticleListItem,
ArticleGridItem,
Details,
},
data() {
return {
title: 'Search Results',
displayMode: 'grid'
};
},
methods: {
changeDisplayMode(displayMode) {
this.displayMode = displayMode;
}
},
props: ['results', 'reformattedSearchString']
};
</script>
文章列表項.vue
<template>
<div>
<div class="card-body">
<h6 class="card-text">{{ result.title }}</h6>
<p
class="card-subtitle mb-2 text-muted"
>{{ result.publisher }} | {{ result.journal }} | {{ result.year }}</p>
<a :href="'https://test.org/api/articles?docid=' + result._gddid" target="_blank">
<i class="fa fa-download" alt="Download"> </i>
</a>
<router-link>
<v-btn dark to="{name:'Details', params: {id: article._gddid}}">
Click here for more Details
</v-btn>
</router-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'ArticleListItem',
props: ['result'],
}
</script>
index.js
import Vue from 'vue';
import Router from 'vue-router';
import Details from '@/components/Details';
Vue.use(Router)
export default new Router({
routes: [
{
path: '/Details/:id',
name: 'Details',
component: Details
}
]
});
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import moment from 'moment'
Vue.config.productionTip = false
Vue.filter('formatDate', function (value) {
if (!value) return ''
return moment(value.toString()).format('MM/DD/YYYY hh:mm')
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
使用<router-link>
標簽讓它工作
使用 Vue Router 時,可以使用<router-link>
標簽,而不是使用<a>
標簽。
這是一個與動態路由匹配的 Vue Router 文檔類似的基本示例。
如果你有這個...
const router = new VueRouter({
routes: [
{ path: '/Details/:id', component: DetailsPage, name: 'Details' }
]
})
您可以在ArticleListItem.vue
文件中聲明路由器鏈接,例如:
<v-btn dark to="{name:'Details', params: {id: article.id}}">
Click here for more Details
</v-btn>
您不能只是 go 到通用詳細信息頁面。 路徑中需要一些動態部分(在我的示例中我稱之為id
)來指定 go 的文章頁面。
編輯
另一個問題是您的路由器設置:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
...需要在您的 main.js 文件中。 index.js 文件中的Vue.use
聲明沒有做任何事情。 只是為了簡潔。 使其成為一個文件:
WhatYourOneTrueFileIsGoingToBeCalled.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import Details from '@/components/Details';
import moment from 'moment'
Vue.config.productionTip = false
Vue.filter('formatDate', function (value) {
if (!value) return ''
return moment(value.toString()).format('MM/DD/YYYY hh:mm')
})
Vue.use(VueRouter)
router = new VueRouter({
routes: [
{
path: '/Details/:id',
name: 'Details',
component: Details
}
]
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.