How do I use routing and folder structure to pass multiple optional parameters in the URL?
What folder structure should I create to handle such cases where the route is something like
user/:id/:product
user/:id/product/:id
You need to create dynamic nested routes. In order to do that you need to manage your folders as indicated in the documentation here.
For your example it should be :
// For user/:id/:product
user/_id/_product
pages/
--| user/
-----| _id/
--------| index.vue
--------| _product
-----------| index.vue
// For user/:id/product/:id
pages/
--| user/
-----| _id/
--------| index.vue
--------| product
-----------| _id.vue
Related
Some Context
I'm building a blog, with content mostly coming from markdown files, using NuxtJS Content.
It if helps, you can see my project on Github (or the deployed site here).
I understand how to create dynamic pages from the MD files under /content.
But I don't know how to inject content from one of these files into a static page.
content/
├── blog/
│ ├── post1.md
│ ├── post2.md
├── privacy/
│ ├── policy.md
│ └── something-else.md
pages/
├── blog/
│ ├── _slug.vue
├── privacy/
│ ├── _slug.vue
├── privacy.vue
├── index.vue
Using my current method/knowledge, I generated a dynamic page based on policy.md:
<template>
<article>
<nuxt-content :document="policy" />
</article>
</template>
<script>
export default {
async asyncData({ $content, params }) {
const policy = await $content('privacy', params.slug).fetch()
return { policy }
}
}
</script>
But I don't want to generate a dynamic page from the MD, or use the slug in the route.
I want to take the contents of policy.md, and insert them into privacy.vue - but I don't know how.
What I tried
It doesn't work using the method from above, but I feel like it should.
console.log(policy) returns [object] [OBJECT]
& console.log(policy.title) returns undefined
What should this tell me? (trying to improve my debugging skills here lol)
Why does this work in _slug.vue but not in page.vue?
Feel like I'm missing some contextual knowledge re: how things work / what the right approach is here.
Alright, so I solved my own problem just before hitting submit by adding this to the static page template:
<div v-for="policy in policy" :key="policy.title">
Why did that work?
Is it because asyncData doesn't know in advance how many items will be fetched, and creates an array -> so policy.title was undefined when it wasn't policy.title at position X in the array (which, I guess, the v-for gives us?)..
I thought that giving a path to a file rather than a dir, like:
const policy = await $content('privacy/policy.md', params.slug).fetch()
Would make it clear that it would be a single item, but that didn't work for me when I tried it earlier. How does that work?
I think this is probably not a nice way to fix it. I mean, I know that there will only ever be one file in this dir, but yeah, there must be a more appropriate way to do this?
Is it possible in Nuxt.js to have multiple route parameters with same level hierarchy?
For instance:
- entry
-- _id.vue
-- _slug.vue
- index.js
No, it's not possible.
But you can use a simple workaround.
Case 1
You need both _id and _slug in the same route. Then you can simply nest them. So that your route will look like this: entry/_id/_slug. And your files would look like this:
entry/
--| _id/
-----| index.vue //this one is for _id
-----| _slug/
--------| index.vue //this one is for _slug
Also you can swap _id with _slug if it fits your needs better.
Case 2
You need two different routes: entry/id/_id and entry/slug/_slug. In this case your files would look like this:
entry/
--| id/
-----| _id.vue
--| slug/
-----| _slug.vue
I want to build a web-application using Vue which should have a website structure like this:
index-page
|--page1
|--page2
|--page3
...
That is, I have 1 index-page that will be my home-page which contains the link for all other pages.
But, each page is from some category and a sub-category, so I want that the address for each page should be like this:
localhost:8080/category/sub-category/page
example: localhost:8080/algorithms/sorting/bubble
In my project structure, these categories and sub-categories are placed like this:
my-project/src/category/sub-category/page/files
my-project
|--src
|--App.vue // for index page
|--main.js // for index page
|--algorithms
| |--sorting
| | |--bubble
| | | |--bubble.html
| | | |--App.vue
| | | |--main.js
| | |
| | |--selection
| | | |--selection.html
| | | |--App.vue
| | | |--main.js
| | ...
| ...
...
These categories and sub-categories are placed on index page like this:
<h2>category</h2>
<h3>sub-category</h3>
<ul>
<li>page</li>
...
</ul>
...
...
I want that any address of the form
localhost:8080/category
or
localhost:8080/category/sub-category
should lead to index page and addresses of the form
localhost:8080/category/sub-category/page
should load the corresponding page.
So, how should I configure my vue.config.js file?
Can I do it only once for all pages like given here for my project structure?
I only want that my website is working correctly and is developed in the correct way (without using any hacks).
Every page is independent of each other. But each page on its own should be a SPA.
Also, I want to know how these all things are related to each other in vue.config.js:
the string that we put in href of
the path displayed in browser window
the path from where the page is loaded from the project
I am asking above question because I have doubt whether the path user sees is same as the path in the project?
Well, since I am using no directory named pages, does that make a difference?
Well. Personally I was building a Vue app with laravel and what I used and mostly a lot of people use is a Vue router.
https://router.vuejs.org/
You can define the links there and it stops the page from reloading and supports transitions for pages. And uses a specific Vue Router href. Hope this somewhat answers your question.
nuxt.js was what I needed. The pages directory handles it all.
Suppose I want to make a blog.
in /pages/ I would add
pages/
-- blog/
--+-- _artcile.vue
--+-- index.vue
-- blog.vue
which would let me have a route /blog and /blog/:article?. Most such examples I have found in these cases, (e.g. in the Nuxt docs for user and user_id) the content which is being requests is standard (e.g. user id or markdown file for the blog). But what if I want each entry to be a unique component? e.g.
pages/
-- blog/
--+-- custom_article_1.vue
--+-- custom_article_2.vue
--+-- index.vue
-- blog.vue
You could just create _artcile.vue and inside it determine yourself what component you want using :is. Docs
<component v-bind:is="currentTabComponent"></component>
I have a question about pages and groups in doxygen.
I have a project, where I grouped classes etc. with the #defgroup and #ingroup cmds. So far this works fine.
Now I'd like to add special documentation to the project with markdown pages. These pages should appear in the dedicated module (group). I tried to create pages with the #page and #subpage cmds. That works fine, but the pages appear plain in the menu.
So I tried to add them to the groups with #ingroup. But that doesn't work as I guessed.
Is it possible to add pages to modules (groups)?
The result should look like this:
Project
|-- Modules
| |-- "Module1"
| | |-- documentation page1 (from *.md file)
| | |-- class documentation
| |-- "Module2"
| | |-- documentation page2
| | |-- class documentation
I hope you can help me!
To group pages you need to use the subpage functionality, no the group.
So create a page for each group that references both subpages and the module group.
/*! \page group1page A documentation page for my group
This page contains the info about group 1 \ref group1_label
\subpage group1page2
\subpage group1page3
*/
http://www.doxygen.nl/manual/grouping.html#subpaging
http://www.doxygen.nl/manual/commands.html#cmdsubpage