This will go haywire on me with none of the routes registering as error logs claim.
{
path: '/auction',
name: 'auction',
// component: '/imports/ui/auctionPage.vue',
components: {
default: auctionPage,
sidebar: filters,
},
children: {
path: 'item/:id',
component: "modalComponent"
}
},
Perhaps there's a way in which I can have my sidebar view which needs to be in root, auctionpage and modal that has it's own path while not re-rendering my infinite scroll.
I got the router-view component in auctionpage as I'm suppose to.
Related
Forgive me for this question, I'm very new to Vue.
Is there a way with Quasar to have the below pages structure?
Home Page, route /, with no drawers
Players Page, route /players, with left drawer
Teams Page, route /teams, with both left and right drawers
For all pages I need the same header and footer (a music player) and I don't want to re-rendering them every time I switch pages.
I think I can use the same layout and a lot of ifs but it seems hacky to me.
Is there a "standard" way to do this in Quasar?
Is there a multi-layout / multi-pages example?
As I know you have two options.
Use one layout. Hide right drawer on /playes and hide left one on /teams.
Use two layouts. In each reuse footer and header. Here is how router should look like (router from my app):
const routes: RouteConfig[] = [
{
path: '/auth',
component: () => import('layouts/AuthLayout.vue'),
children: [
{
path: '',
component: () => import('pages/Auth.vue')
}
]
},
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{
path: '',
component: () => import('pages/Index.vue'),
},
]
},
// Always leave this as last one,
// but you can also remove it
{
path: '*',
component: () => import('pages/Error404.vue')
}
]
I have vue setup and working fine, I can route to pages, and they are shown correctly in the router-view component. I can access this.$route.params.xyz in the components within the page, however, when trying to access in a component, such as the global navigation, the params collection is empty.
The current route URL is localhost:5011/forum/2/details where the 2 is an id value. I can access the 2 happily on the page for some local routing, but I wanted a settings page, to be available on the global menu.
{
title: 'Forum Settings ',
icon: 'mdi-cogs',
text: 'Forum Settings ' + this.$route.params.id,
route: {
name: 'ForumSettings',
params: {
id: this.$route.params.id
},
},
},
However, params is {} and id is undefined.
How can I make this work?
route.js:
{
path: '/forum/:id/settings',
name: 'ForumSettings',
component: ForumSettings,
meta: {
authorize: true,
},
},
on the page itself as a test:
<dr-btn
text="Settings"
:to="{ name: 'ForumSettings', params: {id: this.$route.params.id}}"
>
<v-icon>mdi-cog</v-icon>
</dr-btn>
This works fine.
in the app.vue:
mounted() {
console.info('Mounted Router', this.$route);
},
This is not the current URL, so it seems the router isn't setup at this point. How can it be achieved to get the forum id for the current route (if it is on another page, the settings link will be hidden, so if actually no id, then no menu item)
You could use a vuex store. Have the page that needs settings pass the id param to a vuex variable, have the navigation use a computed property that reads that vuex variable. If you have a lot more than this to do you might also consider a library that synchronizes vue router with vuex.
I had the same issue. I solved it by moving my logic to navigation guards (https://next.router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)
For example:
const routes = [
{
path: '/',
name: 'Home',
beforeEnter:async() => {
let loggedIn = await store.checkIfLoggedIn()
if (loggedIn) router.push({name:'Dashboard'})
return true
},
component: () => import('../views/Home.vue')
},
{
path: '/dashboard',
name: 'Dashboard',
beforeEnter:async() => {
let loggedIn = await store.checkIfLoggedIn()
if (!loggedIn) {
router.push({name:'Home'})
}
return true
}]
I've got to grips with static routes and dynamic routes in Nuxt.
However, I'm trying to work out if it's possible to have effectively unlimited nested pages.
For example, in a standard CMS such as Wordpress I can define a deep nest of pages such as:
*hostname.com/page/other-page/another/yet-another/one-more/final-page*
I suppose I could define an unnecessarily deep page structure, such as:
- /_level1
- index.vue
/_level2
- index.vue
/ _level3
- index.vue
/level4
-index.vue
...and so on. But this doesn't feel particularly efficient or scalable, and introduces lots of duplicate code and maintenance problems.
Is there a better way to achieve this?
You can use nested routes with the "children" option.
https://router.vuejs.org/guide/essentials/nested-routes.html
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
path: 'profile',
component: UserProfile
},
{
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
path: 'posts',
component: UserPosts
}
]
}
]
})
You can also import child routes from a separate file.
import UserRoutes from "./users/router.js"
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: UserRoutes
}
]
})
Then in your users/router.js:
export default [
{
// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
path: 'profile',
component: UserProfile
},
{
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
path: 'posts',
component: UserPosts
}
]
How to get the next route in vue-router
I have the following route: /principal
{path: '/principal', component: Principal}
Now, I need to drive other components that have the same url base,
the new url would be as follows:
/principal/compa
Is it possible to have a single base route be able to display the other components?
Something like this (I know that vue-router does not work like this), but how do you get this behavior?
{
path: '/principal',
component: Principal,
subpath: {
path: 'compa',
component: 'CompA'
}
}
Thanks
There is a children option in VueRouter constructor config to render Vue components with nested routes.
In that particular case, it would be:
{
path: '/principal',
component: Principal,
children: [{
path: 'compa', // it would match /principal/compa
component: CompA
}]
}
From the vue-router doc:
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [ // <-- notice the children property
{
// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
path: 'profile',
component: UserProfile
},
{
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
path: 'posts',
component: UserPosts
}
]
}
]
});
Have a look at nested routes for more details.
When trying to get sub-routes to work using vue-router, my sub-routes are rendering the parent route component and not the declared component for that sub-route. It seems that a component must be declared for a parent route, or no component will be displayed at all. For instance, if I declare my routes like this:
Router.map({
'/login': {
component: Login
},
'/stations': {
subRoutes: {
'/': {
component: Station
},
'/create': {
component: CreateStation
}
}
},
});
Nothing is displayed on any route. But if I declare my routes like this:
Router.map({
'/login': {
component: Login
},
'/stations': {
component: Station,
subRoutes: {
'/create': {
component: CreateStation
}
}
},
});
My stations/create route displays the same component as the stations route. What gives?
You still need to declare the root component for the /stations route, like this:
'/stations': {
component: Station,
subRoutes: {
'/': {
component: ListStations
},
'/create': {
component: CreateStation
}
}
}
According to the documentation:
router.map({
'/foo': {
component: Foo,
// add a subRoutes map under /foo
subRoutes: {
'/bar': {
// Bar will be rendered inside Foo's <router-view>
// when /foo/bar is matched
component: Bar
},
'/baz': {
// Same for Baz, but only when /foo/baz is matched
component: Baz
}
}
}
})
Now, with the above configuration, when you visit /foo, nothing will
be rendered inside Foo's outlet, because no sub route is matched.
Update:
When you create subroutes, you are telling the parent component (in this case Station), that it will need to host some components inside its template. Station and CreateStation don't sit side by side, they have a parent-child relationship (in terms of routes).
That's why the component Station needs to have a router-view element in its template, and both ListStations and CreateStation will render inside it.
Something like this: http://jsfiddle.net/naeg67da/329/