So I have three pages in my app. In my folder structure, I have something like this:
/verify
---complete.vue
---business.vue
---personal.vue
verify.vue
so basically verify.vue has a <nuxt-child> component that deals with my business.vue and personal.vue. What I want to happen is complete.vue even inside the parent route of /verify/complete, will be having a different layout/page template.
Is there any way to achieve this? Thanks.
I was able to fix the problem with extendRoutes in nuxt.config.js. What this does is it adds a custom route without using the folder structure. So when the /verify/complete is hit, it will resolve the component.
router: {
middleware: ['auth'],
base: '/beta/',
extendRoutes(routes, resolve) {
routes.push({
name: 'verify-complete',
path: '/account/verify/complete',
component: resolve(__dirname, 'pages/account/verify-complete.vue')
})
}
}
The idea is to track current route through $route.fullPath, and if i'ts /verify/complete, then change layout appropriately. Lets consider this markup:
verify.vue:
<template>
<section>
<h1 v-if="$route.fullPath === '/verify/complete'">Complete</h1>
<h1 v-else>Business or Personal</h1>
<nuxt-child></nuxt-child>
<section>
</template>
If it's more complicated thah changing some block, tha you should define different pages components, and load them appropriately throug <component :is="COMPONENT_NAME">:
verify.vue:
<template>
<component :is="COMPONENT_NAME"></component>
</template>
Related
I have this in my data;
data(){
text: 'Go to <v-btn> to="profile">Profile</v-btn>'}
Now I need to render this with the html in my component. I tried using this
<div v-html="text"></div> but it wouldn't render. What is the right way to do this.
I think this might help you. The v-btn has an extra >.
<div>
Go To<v-btn :to="{name:'nameofcomponent'}">Profile</v-btn>
</div>
Name of the component will be the name that you've defined in your routes for your component.
For ex:
{
path: "/profile",
name: "profile",
component: () => import("path to profile file")
},
As stated in the docs, you cannot compose a template using v-html and also is it prone to XSS attack.
If you want to compile the template, you can use v-runtime-template, this will accept your template and compile it to display the vuetify components.
I would like to use the same route to display different components based on whether or not the client is authenticated. I am unable to find info on this in the router documentation. Here is the same question but the answer seems to be outdated as router.map is deprecated.
Vue.js - two different components on same route
Please point me in the right direction,
thank you!
I'm not sure if dynamic routing within the router itself is supported at this time. An alternative is to load a wrapper component in your router. Then that component determines what nested components to show.
routes: [
{
path: '/',
component: WrapperComponent
}
]
<!-- WrapperComponent -->
<template v-if="auth">
<auth-view />
</template>
<template v-else>
<non-auth-view />
<template>
You can use mulitple components on a single path using named views :
example :
const router = new VueRouter({
routes: [
{
path: '/',
components: {
component1,
component2
}
}
]
})
<!-- this will display component1 on the path '/' -->
<router-view name="component1"></router-view>
<!-- this will display component2 on the path '/' -->
<router-view name="component2"></router-view>
In my vue application, how to place component (slot?) in the toolbar component?
My app for example:
<template>
<toolbar>…</toolbar>
<router-view />
</template>
and all the routes are lazy loaded.
for some routes I want to place component inside toolbar component. But I can't "insert" the component as slot. and to write the component and turn on/off with v-if seems to me wrong.
I think that I expect is
<div for="toolbar">This content should in toolbar</div>
<div for="router-view">This content for router-view</div>
Is there any way to solve this?
Vue Router Named Views will come in handy.
Sometimes you need to display multiple views at the same time instead
of nesting them, e.g. creating a layout with a sidebar view and a main
view. This is where named views come in handy. Instead of having one
single outlet in your view, you can have multiple and give each of
them a name. A router-view without a name will be given default as its
name.
A view is rendered by using a component, therefore multiple views require multiple components for the same route. Make sure to use the components (with an s) option:
<template>
<toolbar><router-view name="toolbar"></router-view></toolbar>
<router-view />
</template>
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: YourAwesomeComponent,
toolbar: YetAnotherAwesomeComponent
}
},
{
path: '/home',
components: {
default: YourAwesomeHomeComponent,
toolbar: YetAnotherAwesomeComponentThatSouldBeInToolbarOnHomePage
}
}
]
})
In vue, if you declare in a file named app.vue as below, the contents of text.vue will be applied to all pages. By the way, I do not want that text.vue to be applied on certain pages. Is there a way?
app.vue
<template>
<div>
<test></test>
</div>
</template>
You can make use of v-if to conditionally show certain components depending on the page.
You haven't given any details about how your pages are organized, but assuming you are using vue-router and your routes are set up something like this:
router.map({
'/page_one': { name: 'pageOne', component: PageOneView },
'/page_two': { name: 'pageTwo', component: PageTwoView },
});
Then you can add v-if on your component to check the current route's name:
<template>
<div>
<test v-if="['pageOne'].indexOf($route.name) > -1"></test>
</div>
</template>
The array provided to the code above represents the routes on which you would like to hide the component (you can change the comparison logic to only show the component on routes you specify, if you would like the component to be hidden on the majority of routes).
I have parent component which has
<router-view></router-view>
Inside of parent component there is another component and it also has a
<router-view></router-view>
Both are bound to /login route
When I go to /login route it loads both of them. I would like to skip first/parent router-view for loading the component.
How can i achieve this? I can think of setting some state and prevent loading with v-if directive but that seems kind of wrong.
Maybe another solution, can i pass null to a parent named view on specific route?
Found a solution in case of somebody needs:
<-- applies only this one -->
<router-view name="login"></router-view>
<router-view></router-view>
const router = new VueRouter({
routes: [
{
path: '/',
components: {
login: LoginComp
}
}
]
})
Ref : https://router.vuejs.org/en/essentials/named-views.html