i am designing a login form using vuetify, i want to make one option 'forgot password', where after clicking 'forgot password' it should redirect to forgot password page, i tried using router-link,nuxt-link, tag, and vuejs events(#click)and in function i called this.$router.push('forgotPassword'). but nothing works. please help me.
these are the following options i tried.
<template>
<v-col cols="6">
<div #click="changeRouter()">Forgot Password?</div>
Forgot Password?
<v-list-item :to="{path: '/forgotPassword'}">Forgot Password?</v-list-item>
<router-link :to="{ path:'/forgotPassword', name: 'forgotPassword' }">Forgot Password</router-link>
</v-col>
</template>
<script>
changeRouter(){
this.$router.push({path: "/forgotPassword"});
}
</script>
v-list-item is a wrapper for router-link ..
So just the v-list-item with the :to should work.
You have it double now.
Related
I have 2 components, AboutView.vue and HomeView.vue.
AboutView.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<router-link to="/about/add">Add</router-link>
<router-view></router-view>
</div>
</template>
HomeView.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
When I click the 'Add' button, I will be redirected to /about/add where /add is config inside index.js
{
path: '/about',
name: 'about',
component: AboutView,
children:[
{
path: 'add',
name: 'Add',
component: ()=> import ('../views/HomeView.vue'),
},
]
}
The path is working fine.
But the problem is when I click the 'Add' button, what I would expect is it brought me to the HomeView.vue, but instead, it showed the HomeView.vue below the Add button.
Here is the screen.
ScreenShot
it seems like the route-view is a part of the template, but I want it to display the HomeView.vue instead of AboutView + HomeView.
I tried to use <router-view name='name></router-view>, which doesn't help much. I can write a js function to check the path and make the code above disappear, but I expect something more professional.
Let's try to understand from the below image-
router-view is basically the view where the components are rendered.
It’s like the main div that contains all the components, and it
returns the component that matches the current route.
So, to fix this just remove the router-view from AboutView.vue component, so when you will redirect to /home, the component HomeView.vue, will render inside App.vue's router-view.
I am learning Nuxt.js 3 and am writing a simple project with a one-scroll design that has a menu with anchor links. Clicking a link, the site should automatically scroll to the anchor (like a div with an id).
To test this I set up a simple Nuxt 3 installation with npx nuxi init nuxt-app, removed the demo content and replaced it with this:
pages/index.vue
<template>
<div>
<div id="home"><p>hello world</p></div>
<div class="menu">
<nuxt-link :to="{ path: '/', hash: '#ciao' }">
link
</nuxt-link>
</div>
<div style="height: 3000px">placeholder</div>
<div id="ciao"><p>ciao world</p></div>
<div class="menu">
<nuxt-link :to="{ path: '/', hash: '#home' }">
link
</nuxt-link>
</div>
<div style="height: 3000px">placeholder</div>
</div>
</template>
The problem is, that it is not working. The url in the browser is changed to localhost:3000/#ciao or localhost:3000/#home on click. But the view is not being changed.
Is there something else I need to set up in nuxt, to get anchor navigation to work?
As answered here: https://github.com/nuxt/framework/discussions/5561#discussioncomment-3007717
Using a regular a tag solves the issue
<a href="/#ciao">
go to ciao's hash
</a>
Otherwise, you can also use
<nuxt-link :to="{ hash: '#home' }" :external="true"> <!-- no need for a path if same page -->
go to home's hash
</nuxt-link>
The external prop (Nuxt3 only) is detailed here: https://v3.nuxtjs.org/api/components/nuxt-link#props
Quote from the documentation
Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases.
I have a default header which is defined in /layouts as below
<v-app-bar :elevation="0" color="white" fixed app>
<div class="w-100">
<NuxtLink to="/">
<v-img
max-height="24"
src="/nuxt_static/images/rectangle.png"
:contain="true"
></v-img>
</NuxtLink>
</div>
</v-app-bar>
<v-main>
<v-container style="padding: 0">
<nuxt />
</v-container>
</v-main>
I want that when I click on the image rectangle.png it will redirect to homepage. Homepage is defined in the first child index.vue of /pages/ directory with asyncData() function and a component contains it's template. When I enter http://example.com/ into browser, everything works fine. But when I'm in another page and click on the header image to go to homepage, it just displays the template and doesn't run through asyncData() function. Therefore, there is no data on homepage. What should I do for now?
Try to move your code in asyncData hook to fetch hook.
Fetch hook will be called both in server side or client side.
I have a strange issue which I struggled with for a long time... I have a Sidebar with several router-links.
<template>
<div class="nav nav-pills main-nav" id="sidebar" role="tablist">
<router-link class="nav-link" to="/tasks">
Tasks
</router-link>
<router-link class="nav-link" to="/notes">
Notes
</router-link>
<router-link class="nav-link" to="/sounds">
Sounds
</router-link>
<div class="account">
<router-link class="nav-link" to="/profile">
Profile
</router-link>
<a class="nav-link" #click="logOut">
Log out
</a>
</div>
</div>
</template>
<script>
export default {
name: "sidebar",
methods: {
...
}
};
</script>
I have a strange issue with the behaviour of the latter menu. If I go to localhost:8080/notes, the notes button is active as expected. Then, if I click on any of the other link(let's say /tasks), it becomes active as expected. However, if I click on some link once again, /tasks remains active and the new page does not become active. That is, I will be able to navigate to other pages, but the /tasks router link will be active whatever I do. In other words, the "active" link is only updated once... I have no idea what the problem might be :/ Any suggestions are greatly appreciated!
In App.vue I import the sidebar
<div id="app">
<router-view name="header"></router-view>
<router-view name="sidebar"></router-view>
<main :class="{ 'remove-width': sidebarOpened }">
<fade-transition origin="center" mode="out-in" :duration="250">
<router-view />
</fade-transition>
</main>
</div>
My router.js start with
let router = new Router({
mode: "history",
linkExactActiveClass: "exact-active",
linkActiveClass: "active",
base: process.env.BASE_URL,
Pretty sure you shouldn't be having multiple router-views in your template. Can you remove those / replace them with the actual components and see if it fixes the issue? Something like this:
<div id="app">
<AppHeader />
<AppSidebar />
<main>
<fade-transition>
<router-view>
</fade-transition>
</main>
</div>
If it doesn't, you should post a bit more code of your components and router to help identify the issue.
Hey there another question:
i have a div named group in the group i have several blocks/divs below the group
the group(parent) is here:
<div v-if="block.blocktype == 'partial'">
<h1>{{block.name}}</h1>
<component v-if="block.template_path" :is="block.template_path" :key="block.template_path" v-bind:bduuid="block.uuid" v-bind:block_data="block.block_data">
</component>
</div>
div component like this:
<v-date-picker
ref="picker"
v-model="date"
:picker-date.sync="pickerDate"
:events="arrayEvents"
event-color="green lighten-1"
full-width
reactive="true"
:locale="this.localication"
></v-date-picker>
</div>
<span style="color: blue;" #click="CreateNewAppintmentFunction()">Create new Appointment</span>
so now i want to change the child view from "show" to "new" after click
with a this.$router.push("appointment/quickedit");the
CreateNewAppintmentFunction()
anyone a idea how i can change the router path from "show appointment" to "new appointment"
thanks a lot
I don't know if I get correctly, but if you want to have dynamic path for page. You can do something like this
For example:
{ path: "baseurl/:appointment/quickedit", component: YourComponent, name: yourComponentName ... }
You can set your key word as router param.
this.$router.push("baseurl/show_appointmen/quickedit")
this.$router.push("baseurl/edit_appointmen/quickedit")
and in mounted hook you can get appointment param, and do your logic.