I'm building a structure that I need dynamic routes.
This makes it necessary for navigation with more information.
Route: /lab/1/lad/2
Inside the route(page) lab I have two files, index.vue and a _id.vue
Inside the side learning to do the same, but including only the _id.vue
pages
--| lab/
-----| index.vue
-----| _id.vue
-----| lad/
--------| _id.vue
Page not found.
Could anyone help with this question?
Much obliged.
Try to make the _id as directory and add its own index.vue :
pages
--| lab/
-----| index.vue
-----| _id/
--------| index.vue
--------| lad/
-----------| _id.vue
Related
I'm trying to create a simple nested routing:
App (root component, main navigation)
Topic1 (sub-navigation)
Topic1/Sub
Topic2
My demo on Codesandbox has the following issues:
1. When navigating from /topic1 to /topic1/sub, I expected the content from topic1 to show up and the content from topic1/sub to be shown below, like this:
However, Topic 1 does not show anymore.
2. How can I avoid showing "App" twice?
I know I've added path: "/topic1", component: App, but only because without it the routing did not work at all. As per the comments in router/index.js:
component: App, // Option 1 - Navigation to topic1,2 and /sub works (why?) 'App' is displayed twice
component: Topic1, // Option 2 - Navigation to /sub does not work but at least 'App' is only displayed once
I seem to be missing something essential - thank you already for any answers.
App component is showing twice because it is mounted twice. First it is mounted in main.js when you create the app. Then it is mounted in router-view as the route component. To avoid this, you shouldn't use the App component in router, instead make another Layout component where you define the page layout to be used by the vue-router. Also, this will allow the scenario where, while having a single entry point for your app (App), you can define different layouts for different routes, if needed.
Regarding the first question, the content of Topic1 component is not shown when navigating to Sub route, because it is wrapped in router-view. router-view displays only the content of the current route component. Avoid placing any content in router-view as it will be replaced on route navigation. This will work:
<h1>Topic1</h1>
<h2>Topic1 Content</h2>
<p>
<router-link to="/topic1/Sub">/topic1/sub</router-link>
</p>
<router-view> </router-view>
Here is the working codesandbox.
Also I refactored a bit your router index.js.
All I'm trying to do is pass a parameter to a page in Nuxt. In Vue, it's easy:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
or
<router-link to="/user/123">User</router-link>
You just need to define your route correctly in router.js.
I haven't found a way to do it in Nuxt.
There is some reference in the Nuxt documentation to using underscores to define dynamic routes here, which is just strange. How do you pass more than one prop? What if you don't want to mess up your page naming conventions?
But in any case, it simply does not work. It appears to be possible to get the value of the parameter only by accessing this.$route.params.myprop, which is bad practice as explained here.
So how do I set up route "/users/123", invoke the Users.vue component in /pages, and actually get "123" as a prop?
(No, I'm not going to use VueX. It's very poor practice to use global state simply to pass parameters.)
The underscore filename system is the recommended way to create dynamic routes on Nuxt.js.
How do you pass more than one prop?
The documentation has a section for dynamic nested routes:
pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue
This will give you a :category/:subCategory/:id route.
Also, you can use extendRoutes in nuxt.config.js, or the router-module if you want to avoid using the default Nuxt generated routes altogether.
Do you mean something like this?
<nuxt-link to="/user/:id">User</nuxt-link>
and now type in the url bar
http://yourDomain/user/123
And in the created lifecycle hook in the page user you should see the console log of 123
created(){
console.log("your id is: " + this.$route.params.id);
}
For example:
I have an url like /content/supercontenturl/.
If this content type is a video (param in my DB), I'll show videoplayer on the page and other components, but if type of content is text or other, I'd like to load specific page.vue for this content with own components, but the url must be same - /content/supercontenturl/
My structure pages:
index.vue
/content/
/_supercontenturl/
_id.vue // The page for video
_id_text.vue // The page for text
... // Other pages
index.vue
you should remember in nuxt all vue files inside Pages directory are components check the guide, and each file or directory you add there will create routes.
the easy way to succeed your demand is put the video page and content page with a proper name in components directory. Create a new file in pages it will contains in scripts the data call and template will contains the component selector, you can use a v-if or dinamic components for load the right component. and pass the data by props.
so I structured my pages folder like this
pages/
--index/
----page1/
------_slug.vue
----page2/
------_slug.vue
----page1.vue // contains different content
----page2.vue // contains different content
--index.vue
so the routes can be accessed like
/index
/index/page1
/index/page2
/index/page1/some-slug-here
/index/page2/some-slug-here
now, what I want to achieve is, when I access the route /index/page2/some-slug-here. it will show the sidebar component based on that route param.
so to show some visual, take a look at the attached image.
since nuxt don't seem to support named view routes. are there any other ways to achieve what I want?
thanks.
Nuxt.js does support named views. They are referenced as layouts in documentation and serve exactly that purpose.
It is possible to create multiple layouts in layouts folder and specify them for each page as following:
<template>
<!-- Your template -->
</template>
<script>
export default {
layout: 'sidebar'
// page component definitions
}
</script>
I'm planning to have the following layout:
+-------------------------------------------------+
| HEADER (STATIC) |
+-------------------------------------------------+
| FOREWORD (just homepage; dynamic) |
+-------------------------------------------------+
| BOOTSTRAP CARDS |
| with navigation links |
| (dynamic) |
+-------------------------------------------------+
Since it's a Single Page App, I'm using Vue.js with routing to make sure everything gets displayed in the same view. However, trying various modifications to make the dynamic contents disappear and be replaced with a different page selected from the Bootstrap cards doesn't give results I'd like to achieve (links from cards and cards themselves don't disappear and the contents of destination links gets displayed in a spot where <router-view></router-view> is placed. I'd like the FOREWORD and BOOTSTRAP CARDS to be totally replaced by destination links).
Is there any dedicated way to achieve this? Or should I just manipulate with v-if and a show/hide flag defined in JS underneath to hide the dynamic contents when links from cards get selected?
Setup "named views" - look in the official docs, or make the router-view component contain the foreword and the cards.
Glad you got it figured out.