I have a form divided in 5 components and the user can navigate through them via steppers (I'm using vue-material for my project). I use vue-router for that. However, I'm having a serious issue here: components lose all the information in the store (I'm using vuex) when they come back to a route they already filled. So to make it clear: if a user fills the first step of the form and then goes to step two, when he wants to come back to step one data is no longer available and the form is totally empty (and the state in vuex is also reset). What am i doing wrong?
import Vue from 'vue'
import Router from 'vue-router'
import Projet from '#/components/Fiches/Projet/Projet'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Projet
},
//other routes here
]
})
And this is the html code
<template>
<div class="project-steppers">
<md-steppers md-dynamic-height md-alternative>
<md-step id="first" to="/Projet" md-label="Projet" />
// other steps here
</md-steppers>
</div>
</template>
And an example of one of the inputs I use:
<md-field>
<label for="project-name">Nom du projet</label>
<md-input id="project-name"
v-model="project.projectName"
name="project-name"
#change="updateProjectName"/>
</md-field>
[...]
methods: {
updateProjectName () {
this.$store.commit(projectStore.MUTATE_PROJECTNAME, this.project.projectName)
}
More information: when I fill the different inputs I see that the store is updated with the new values, so the mutation is working.
First of all, Vuex does not store data in the browser - just in memory. That means that you could either install a third party plugin such as vuex persisted state or write your own methods to set and get the items from your storage, e.g.:
const storage = localStorage.getItem('key');
new Vuex({
state: {
yourProp: storage ?
? JSON.parse(storage.yourDataKey)
: 'default-value'
},
actions: {...}
mutations: {...}
})
I think to should use router-link or $router.push().
Vue:
import Vue from 'vue'
import Router from 'vue-router'
import Projet1 from '#/components/Fiches/Projet/Projet1'
import Projet2 from '#/components/Fiches/Projet/Projet2'
import Projets from '#/components/Fiches/Projet/Projet' //with props
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Projet1 // default project
},
{
path: '/Projet1', // url for the same component
name: 'Projet1',
component: Projet1
},
{
path: '/Project2',
name: 'Projet2', // url for the another component
component: Projet2
},
{
path: '/Project/:id',
name: 'Projets', // url for a component with props
component: Projet,
props: true
}
]
})
HTML: A way to call Projet without reloading with router-link
<template>
<router-link to="/Home"></router>
<router-link to="/Projet1"></router>
<router-link to="/Projet2"></router>
</template>
js: I would add a router push
updateProjectName () {
this.$store.commit(projectStore.MUTATE_PROJECTNAME, this.project.projectName)
this.$router.push('/' + this.project.projectName)
}
Your question looks like the issue opened by kristianmandrup:
menu or tabs with router links!?
Related
As part of my Quasar app, I have the following route:
import { RouteRecordRaw} from 'vue-router'
import { uid } from 'quasar'
const routes: RouteRecordRaw[] = [
{
path: '/',
redirect: () => {
console.log('matched /')
return {path: `/${uid()}`}
}
},
{
path: '/:uuid',
component: () => import('pages/User.vue')
// component: User,
},
];
export default routes;
This works fine when going to /: the URL is changed to /73a219e5-2cf2-4dd0-8... and User.vue is executed (specifically there a fetch inside that retrieves some data based on the :uuid parameter.
If I force a route from within a component (User.vue for instance), via
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/')
I do see that the URL changes to a new UUID but User.vue is not executed. Specifically, a reference to route.params.uuid where const route = useRoute() is not reactive.
Is this normal (= I have to look for anther way to trigger), or is there a misuse (erroneous use) on my side?
The core of the issue is that you're (re)using the same component for rendering the page you're navigating from and the page you're navigating to.
By design, Vue optimises DOM rendering and will reuse the existing component instance. This means certain hooks won't be triggered (e.g: mounted, created, etc...) when changing route.
To force Vue into creating a different component instance when the route changes, use the current route's .fullPath as key on <router-view>:
<template>
...
<router-view :key="route.fullPath"></router-view>
...
</template>
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute();
</script>
I have a vue application which dose simple inserts and i am trying to use vue router to redirect to different pages for example when i load /postComponent and /userComponent they will be on separate pages not all in one page when loading the localhost:8080
app.js
<template>
<div id="app">
<router-link to="/postcomponent">post</router-link>
<router-link to="/usercomponent">user</router-link>
<router-view/>
</div>
</template>
<script>
import PostComponent from './components/postComponent';
import userComponent from './components/userComponent';
export default {
name: 'app',
components: {
PostComponent,
userComponent
}
};
</script>
routes.js
import Vue from 'vue'
import App from '/client/src/App'
import VueRouter from 'vue-router'
import postComponent from '/client/src/components/postComponent';
import userComponent from '/client/src/components/userComponent';
vue.use(VueRouter);
Vue.config.productionTip = false
const routes = [
{
path: '/postcomponent',
name: 'postcomp',
component: postComponent
},
{
path: '/usercomponent',
name: 'usercomp',
component: userComponent
},
];
new Vue({
routes,
render: h => h(App),
}).$mount('#app')
postComponent
<script>
import postService from '../postService';
export default {
name: 'postComponent',
data() {
return {
posts: [],
error: '',
topic: '',
price: '',
location: '',
provider: ''
}
},
index.js
const express = require ('express');
const bodyparser = require ('body-parser');
const cors = require ('cors');
const app = express();
app.use(bodyparser.json());
app.use(cors());
const posts = require('./api/posts');
const users = require('./api/users');
app.use('/api/posts', posts);
app.use('/api/users', users);
const port = process.env.port || 500;
app.listen(port, () => console.log(`Server started on port ${port}`));
im getting the following error
https://i.stack.imgur.com/42Ka3.png
UPDATE ** :
App.vue :
<template>
<div id="app">
<router-link to="/postcomponent">post</router-link>
<router-link to="/usercomponent">user</router-link>
<router-view/>
</div>
</template>
Inside Routes.js import statements and paths :
import PostComponent from "#/components/PostComponent";
import UserComponent from "#/components/UserComponent";
const routes = [
{
path: '/postcomponent',
name: 'postcomp',
component: PostComponent
},
{
path: '/usercomponent',
name: 'usercomp',
component: UserComponent
},
];
PostComponent :
<template>
Post Comp
</template>
<script>
export default {
name: "PostComponent"
}
</script>
User Comp :
<template>
User Comp
</template>
<script>
export default {
name: "PostComponent"
}
</script>
UPDATE * :
remove those unnecessary imports on app file
I think its better to first have a look at Vue-router at https://router.vuejs.org/
SPA stands for Single Page Application means that all of your components eventually will execute on a single *.html file. this means that in SPA, you cant just redirect your client to another url and perform another HTTP request and still be on the same Vue SPA!. because then you will probably get new html/css and javascript files to execute and render.all you can do is 1.use vue router to specify on which path, what component should render. when you describe your router using VueRouter thats exactly what you are going to do!, config your router and tells him on which path, what component you should render.
there is no way that you can redirect your client to another domain and still be on the same SPA and loads your components BUT !
as i can see in your codes there is a way to achieve what you want. there are some problems in your code but i'll show you how you can config two routes to achieve something like that.
i assume that you have those two components postComponent and userComponent ready.
first we have to import those in our routes.js :
import postComponent from 'PATH_TO_COMP';
import userComponent from 'PATH_TO_COMP';
note that you can use '#' as an alias for /src in your directory
first we have to specify two routes, for /postcomponent and /usercomponent,
we doing it by adding two objects to routes array in VueRouter, we can specify a name for our routes and we must specify a component which will render on that router,
routes : [
{path : "/postcomponent", name :"postComp", component:postComponent},
{path : "/usercomponent", name :"userComp", component:userComponent}
]
so now we have to implement our app file to say that where we want this components to render, we use empty <router-view/> tag to show that,
now everything is set, you can switch between routes using <router-link> tag like below :
<router-link to="/postcomponent" >Show me post component :)</router-link>
and you will see that when you go to http://localhost:8080/postcomponent your postComponent will render and sits on your <router-view/> !
Say I just started a vue-nodejs-webpack simple project with vue cli:
vue create xxx
How should I plug its default client-side routing to allow certain routes based on authentication? in the most idomatic way?
My App.vue will look something like this:
<template>
<v-app class="grey lighten-4">
<Navbar />
<v-content class="mx-4 mb-4">
<router-view></router-view>
</v-content>
</v-app>
</template>
Whereas "Navbar" is a simple top navigation menu, and router-view simply shows content based on current route.
Route.js will look like this:
import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from './views/Dashboard.vue'
import Projects from './views/Projects.vue'
import Team from './views/Team.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'dashboard',
component: Dashboard
},
{
path: '/projects',
name: 'projects',
component: Projects
},
{
path: '/team',
name: 'team',
component: Team
}
]
})
In roter.js, you can use vue-router hooks to have precise control on route whether to render components or not
Here in the below example isAunthenticates is a separate javascript function which returns boolean, by checking in the backend whether the user is authenticated or nor
router.beforeEach((to, from, next) => {
if (!isAuthenticated) next('/login')
else next()
})
At the same time you can also use pre router hooks to prevent the user to enter specific route
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
Also you can use In-Component Guards at specific components to verify whether the user has specific access to this component or not
I am trying to understand vue-router. But so far I was not able to get what I need. In simple terms, when I go to example.com, it should show the Home component and if I go to example.com/:id, I want SavedComparator component to be loaded. My router.js is as below:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import SavedComparator from './views/SavedComparator.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Home,
children: [
{
path: '/:id',
component: SavedComparator
}
]
}
]
})
In my App.vue, I have below code segment:
<v-content>
<h2>params: {{ $route.params.id }}</h2>
<router-view />
</v-content>
But when I go to example.com/h8s7f, it always shows Home component. In addition, $route.params.id in App.vue doesn't print anything.
The problem is that you are expecting the router to behave as if it had history mode activated
Either turn history mode on:
export default new Router({
mode: "history",
routes: [
Or access the url as example.com/#/h8s7f (with the hash before the route)
Here is an example: you can access the route by adding / + an id
https://codesandbox.io/s/vue-routing-example-33p1n?fontsize=14
you don't have to start your route with '/' in your nested routes because routes starting from '/' will be considered parent route try this in your children
{
path: 'comparator/:id',
component: SavedComparator
}
and then example.com/comparator/id will route you to correct component
I'm having trouble getting my child views to render in Vue.
My main.js file looks like this
import DashboardProducts from './components/Dashboard/DashboardProducts'
import DashboardSettings from './components/Dashboard/DashboardSettings'
Vue.use(VueRouter)
Vue.use(Vuex)
const routes = [
{ path: '/activate', component: Activate },
{ path: '/dashboard/:view', component: Dashboard,
children: [
{ path: 'products', component: DashboardProducts },
{ path: 'settings', component: DashboardSettings }
]
},
{ path: '/login', component: Login },
{ path: '/account', component: UserAccount }
];
const router = new VueRouter({
routes // short for routes: routes
});
export default router;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
As you can see I have imported the components and get no errors. I have also added them as children of Dashboard and set their paths.
In my Dashboard.vue view I do this
<template>
<div>
<dashboard-nav></dashboard-nav>
<!-- Will display product and settings components -->
<router-view></router-view>
</div>
</template>
<script>
import DashboardNav from '../components/Dashboard/DashboardNav'
export default {
name: 'Dashboard',
components: {
DashboardNav
}
};
</script>
<style>
</style>
Urls are matching but no components are rendering. What am I missing?
Here is a JSFiddle of pretty much what I'm going for https://jsfiddle.net/dtac5m11/
It seems to be working fine there but I'm also using single file components in my app so it may be a little different?
Again, the issue is getting the child components to render when their routes match. Currently no components are being mounted.
UPDATE:
I am getting the DashboardProducts component to render but can't get DashboardSettings to render.
Thanks!
{ path: '/dashboard/:view', component: Dashboard,
At first, for what purpose do you add :view after dashboard path? If you are using this one for children path as a parameter, it is an issue. It is the reason, why your children component are not rendering. Because, :view is for dynamic routes. /dashboard/:view is equivalent to /dashboard/* and it means that after /dashboard there can be any route and this route will render Dashboard component. And your children paths /dashboard/products and /dashboard/settings will always match /dashboard/:view and render parent component-Dashboard.
So, in your case, your routes for children components are known. So you do not need to use :view.
More, https://router.vuejs.org/en/essentials/dynamic-matching.html.