nuxt.js -> 没有 axios 的自定义路由如何获取 'id'
nuxt.js -> custom routes without axios how to get the 'id'
所以在我的 nuxt.js 项目中,我需要一个自定义路线,如此处所述 https://nuxtjs.org/examples/custom-routes
到目前为止我已经实现了以下内容。
文件:pages\trails.vue
...
<nuxt-link v-bind:to="'/trail/' + trail.article_code">{{ trail.article_description }}</nuxt-link>
...
这相当于 index.vue 文件。如果我是正确的,此文件中没有其他相关代码
文件:pages\trail\_id
<template>
<div class="vttTrails">
<div class="ui grid centered">
<div v-for="(trail, index) in listTrail">
<div class="ui card">
{{ trail.article_code }}
</div>
</div>
</div>
</div>
</template>
<script>
import feathers from 'feathers/client';
import socketio from 'feathers-socketio/client';
import hooks from 'feathers-hooks';
import io from 'socket.io-client';
import * as process from "../../nuxt.config";
const vttSocket = io(process.env.backendUrl);
const vttFeathers = feathers()
.configure(socketio(vttSocket))
.configure(hooks());
const serviceArticles = vttFeathers.service('articles');
export default {
layout: 'default',
data: function() {
return {
listTrail: [],
curLanguage: this.$store.state.site.curLanguage,
curCategory: this.$store.state.site.curCategory
}
},
mounted: function() {
return serviceArticles.find({
query: {
category_id: this.$store.state.site.curCategory,
article_code: '',
$sort: {
article_rating: 1
},
$select: [
'id',
['article_description_' + this.$store.state.site.curLanguage, 'article_description'],
'article_length',
'article_ascend',
'article_code',
'article_at',
]
}
}).then(page => {
this.listTrail = page.data;
})
},
}
</script>
所以我把整个文件放在这里,以防万一。单击 link 将转到例如"trail\cwu" 这是正确的,因为我有。值 "cwu" 需要进入 article_code: ''
。我试过 mounted: function(params)
但没用。
问题
我需要做什么才能在我的“_id.vue”中获得 'params' 部分?最终我会调整 select,因为它只会 return 当然。
好的。所以我现在所做的是更改“_id.vue”文件中的数据函数。它现在包含:
data: function() {
return {
listTrail: [],
curLanguage: this.$store.state.site.curLanguage,
curCategory: this.$store.state.site.curCategory,
curTrail: window.location.pathname.split('/')[2]
}
},
这可能不是正确的方法,但确实有效。
所以在我的 nuxt.js 项目中,我需要一个自定义路线,如此处所述 https://nuxtjs.org/examples/custom-routes
到目前为止我已经实现了以下内容。
文件:pages\trails.vue
...
<nuxt-link v-bind:to="'/trail/' + trail.article_code">{{ trail.article_description }}</nuxt-link>
...
这相当于 index.vue 文件。如果我是正确的,此文件中没有其他相关代码
文件:pages\trail\_id
<template>
<div class="vttTrails">
<div class="ui grid centered">
<div v-for="(trail, index) in listTrail">
<div class="ui card">
{{ trail.article_code }}
</div>
</div>
</div>
</div>
</template>
<script>
import feathers from 'feathers/client';
import socketio from 'feathers-socketio/client';
import hooks from 'feathers-hooks';
import io from 'socket.io-client';
import * as process from "../../nuxt.config";
const vttSocket = io(process.env.backendUrl);
const vttFeathers = feathers()
.configure(socketio(vttSocket))
.configure(hooks());
const serviceArticles = vttFeathers.service('articles');
export default {
layout: 'default',
data: function() {
return {
listTrail: [],
curLanguage: this.$store.state.site.curLanguage,
curCategory: this.$store.state.site.curCategory
}
},
mounted: function() {
return serviceArticles.find({
query: {
category_id: this.$store.state.site.curCategory,
article_code: '',
$sort: {
article_rating: 1
},
$select: [
'id',
['article_description_' + this.$store.state.site.curLanguage, 'article_description'],
'article_length',
'article_ascend',
'article_code',
'article_at',
]
}
}).then(page => {
this.listTrail = page.data;
})
},
}
</script>
所以我把整个文件放在这里,以防万一。单击 link 将转到例如"trail\cwu" 这是正确的,因为我有。值 "cwu" 需要进入 article_code: ''
。我试过 mounted: function(params)
但没用。
问题
我需要做什么才能在我的“_id.vue”中获得 'params' 部分?最终我会调整 select,因为它只会 return 当然。
好的。所以我现在所做的是更改“_id.vue”文件中的数据函数。它现在包含:
data: function() {
return {
listTrail: [],
curLanguage: this.$store.state.site.curLanguage,
curCategory: this.$store.state.site.curCategory,
curTrail: window.location.pathname.split('/')[2]
}
},
这可能不是正确的方法,但确实有效。