Questions tagged [vue-router]

Vue Router is a routing library for single-page applications designed for use with the Vue.js framework.

0
votes
1answer
13 views

How to allow users to type address when using vue spa on google cloud storage

We are hosting a vue spa on google storage buckets and it works find for the main index page and for the links on the page but you are unable to type a url in and go the the page because google cloud ...
-2
votes
1answer
20 views

Vue Router - build from JSON

I'm quite new to Vue.js. I'm used to vanilla JavaScript. I need to be able to generate route paths from a JSON file. How can I achieve it? EDIT For example, say this is my JSON: [ { "name": "...
0
votes
1answer
11 views

Unable to create the correct link with vue router-link

I am using the vue rounter-link tag to navigate to a different page. My problem is that it does not seem to navigate to a different page. I think the problem lies within the "params" of the router-...
-1
votes
0answers
19 views

My Vue app html5 history mode on deploy gives error on refresh or when manually typed by user

I have a vue app that on my local machine works perfectly. On researching why It plays up on deploy I saw in the docs as well as this forum some solutions. It appears that I am reading the solution ...
0
votes
1answer
14 views

VueRouter this.$route.query always empty

I'm trying to get the query param code, but $route.query is always empty. I've used function mode per the docs. What is missing? Router: // use vue-router import Router from 'vue-router' Vue.use(...
0
votes
0answers
13 views

Route guard redirect to 404 with beforeEnter when using dynamic named route

I'm trying to redirect to a 404 page when the board does not exist. However I don't know how to get the id to check if it does exist or not. Also not sure how to check if it exists from the router. ...
1
vote
2answers
18 views

vue.js: can't access to router parameters from computed property

I'm trying to pass a string parameter using the link. but it seems that computed or methods property cannot return the parameter value. The whole component stops rendering when I use computed property....
2
votes
0answers
28 views

How to handle navigation when removing the current page's Vuex record?

I have a ClientManagePage where I display client information and allow for the removal of the displayed client. The vue-router route configuration for that page looks like this: { path: '/client/:...
1
vote
2answers
43 views

Setting up route-guard in Vue.js/Firebase login authentication interface

I am building a basic Vue.js/Firebase authentication interface based on the following tutorial: (part 1 - https://medium.com/@oleg.agapov/basic-single-page-application-using-vue-js-and-firebase-part-1-...
0
votes
0answers
28 views

Using vue-router with vuetify components

I have created a vue project using vue ui command along with the vue-cli-plugin-vuetify plugin. By default it have Home and About vue components in the src/views folder with the defined routes in src/...
1
vote
0answers
18 views

Waiting request located in middleware finished before rendering page

I have an issue here. I use Vue.js alongside with Nuxt.js. I made middleware to implement the authentication. Here I use JSON Web Token. I have accessKey and refreshKey. The refreshKey is used to ...
0
votes
1answer
25 views

vue router Cannot read property 'push' of undefined

i'm using vue router and its work and navigate to other pages but gives me errors: Error in created hook: "TypeError: Cannot read property 'push' of undefined" Cannot read property 'push' of ...
0
votes
2answers
26 views

Push duplicate query parameters to Vue router

I would like to construct a url string like so "http://localhost:64549/request/list?page=1&dataLakeStatus=1&dataLakeStatus=2" with duplicate keys in the query parameters. How can I do this ...
0
votes
1answer
36 views

how add a href inside nuxt-link?

I have array of cards like this <nuxt-link :to="{ name: 'portfolio-slug', params: { slug: card.slug } }"> <a :href="card.link>Go to href</a> </nuxt-link> click on card with ...
1
vote
1answer
26 views

what does this.$root means in a component?

I have a main App.vue component. in there, I have the following code: export default { data() { return { testVariable:false } }, } </script> <template> <VApp :dark=...
0
votes
1answer
18 views

How to watch router object in main vue instance

From my main vue instance I am trying to detect when a route is changed. So far what i have learned that i need to deep watch an object to detect property changes. But my approach is not working. What ...
0
votes
1answer
49 views

Vue.js push.route not changing the components in App

Good day. I am new to vue and i am trying to redirect my login page to another page whenever the user login to load another page/component. The url changes and no errors are displayed however the ...
-1
votes
0answers
20 views

How I can configure virtual host for vue app?

I'm trying to setup virtual host for vue app 3.6 but its not working for me. I am using centos 7. Application is running as localhost:8080 I want to run like : www.xyz.com Checked this as well : ...
0
votes
0answers
28 views

Correct path notation in Vue.js, when app doesn't run in the root folder

Our website doesn't run in the root folder of the server, but inside a sub folder. Is there a best practice way for relative path notations? For example, if we want to reference to a picture located ...
2
votes
1answer
22 views

How to specify type of an arrow function defined as an object literal in TypeScript?

I have the following object: let route = { path: "/login", name: "login", component: Login, beforeEnter: (to, from, next) => { if (store.state.system.loggedIn) { ...
0
votes
1answer
23 views

Problem with vue router, history mode not working on second layer

I have a vuejs project that uses vue router i made a dashboard for my website and i wanted to add a second router to project for it import Vue from 'vue' import Router from 'vue-router' import Index ...
0
votes
0answers
24 views

How do I to read and parse a cookie and store the results in Vuex prior to running Vue-Router guards

I'm currently using the method described in Authentication in SPA the Right Way wherein a JWT header and payload is stored inside a session cookie. I want to read this cookie, if available, as soon ...
0
votes
1answer
34 views

Vue Router not matching a url with multiple dynamic values

I am trying to add a nested url to my routes. So far, every route works fine except for the last one (see code below). I also tried nesting the urls (using the children property), but was ...
0
votes
2answers
44 views

Problem importing getters into Router - Vuex

Problem importing getters into Rotate - Vuex. I am trying to import a value that is within the vuex state. An error is reported, stating that it is undefined. I have no idea what I might have done ...
1
vote
1answer
29 views

How to extract only the routes from vue router to generate sitemap

I have a file exporting my VueRouter instance: // src/js/router.js import VueRouter from "vue-router"; export default new VueRouter({ mode: "history", routes: [ { name: "home", ...
0
votes
1answer
28 views

How to scroll to a specific anchor using a router-link?

I'm trying to develop a simple website using vue js and so far it goes well but I'm facing the following Issue: I'm using a router to change pages, it works, but what I need to do is: Change Page &...
0
votes
0answers
6 views

Integrate CPT in a Vue-Wordpress starter theme

I am trying to understand how to integrate Vue + Wordpress and have come across this awesome starter theme, however, I'm stuck as to how to integrate custom post types in this setup. It currently only ...
-1
votes
0answers
12 views

How to run HTTP Post inside form in vue component using Laravel/VueJS App with vform library?

Can't seem to initiate HTTP request. No errors and no console issues. Using @submit.prevent for createUser(). Expected behavior is to receive status 200 like I receive in postman. <template> ...
1
vote
0answers
30 views

How to make my custom CSS and Javascript file work in my vuejs app

am working on a project, in my vuejs app, I noticed that if I should navigate to a route with a parameter, my CSS in my index.html and my javascript won't be included, it will give me this error in ...
0
votes
0answers
16 views

Why when I reload my vue app the dynamic parameters of router-vue are deleted?

If I navigate to a valid route (example: http://example.com/this-route) the page loads however when I refresh, the browser gets redirected to the root (example: http://example.com/). Why is this ...
0
votes
2answers
45 views

How to redirect in Vue.js to different url when clicked?

I'm making a post board with Vue.js and trying to make the page redirected when each post is clicked. I've installed vue-route and axios. In index.js, export default new Router({ route: [ { ...
0
votes
1answer
28 views

Vue.js cannot change data in other hook and methods

I'm developing vlog service with flask, vue. Between two components of vue - PostList and PostDetail vue -, I use Eventbus to send postId. PostList send postId and PostDetail receive it. And then i ...
0
votes
2answers
28 views

VueJS: Access parent prop in child when the child is visited directly (using vue-router) without a centralized store (vuex or eventBus)

In this codesandbox demo, the parent home component has a child addItem component. Parent's passes array (as prop) to the child and so the child is able to add item to the parent's list i.e. the ...
1
vote
0answers
24 views

Vue-router Getting dynamic path from routes in this.$route.matched

I’m trying to create a breadcrumb using this.$route.matched An example path: /projects/:projectId/project-details So the this.$route.matched array has 3 route objects: Route 1 path: /projects Route ...
0
votes
1answer
27 views

vuerouter editing link and do I store the state?

I am using vuerouter really for the first time and I am trying to dynamically add a url name to the hyperlink of the route. Not sure what I am doing here, {{message}} would show the name and I am ...
0
votes
1answer
52 views

How to transfer post from one component to another?

Good afternoon, please tell me. I am training now using Vuex and I cannot transfer the post from one component to another. I have a component Pagination, where all the posts and the history component ...
7
votes
4answers
216 views
+50

How to prevent parent component from reloading when changing a parameterised child component in Vue js

I have a page where a ClientPortfolio (parent component) containing a list of Securities (child component) are loaded in a v-data-table list. The issue I have is that ClientPortfolio is fully ...
-1
votes
3answers
39 views

Laravel Vuejs Error: Uncaught ReferenceError: Login is not defined

I'm trying to use vue-router in a CRUD app I've followed in a tutorial. The links showing up but I get this error: Uncaught ReferenceError: Login is not defined I already imported vue-router in my ...
0
votes
1answer
19 views

Translate meta tags in vue-router with i18n

I can't figure out how to use i18n inside vue.router to translate the meta tags that are being used for my breadcrumb main.js import vuexI18n from 'vuex-i18n'; Vue.use(vuexI18n.plugin, store); const ...
-1
votes
0answers
14 views

Compression and encryption with vue router

Using Vue router without webpack. i want to compress and encrypt the components at the server. and decompress and decrypt at the vue router. I'm ok managing this code in vue-router and server side(...
0
votes
1answer
22 views

Vue.js lifecycle events and where to start loading store properties (Vue.observable)

I'm using Vue.observable() to manage state and need to wait for two store properties to be populated before most views are loaded by vue-router. Tried putting the loading in the beforeCreate, created ...
0
votes
0answers
24 views

VueJS addRoutes add more children routes

Implementing language switcher and have this last (hope so) missing puzzle. I have these routes defined: routes: [ { path: '/', redirect: `/en`, }, { path: '/:lang', ...
0
votes
0answers
30 views

Vue.js IE 11 logout routing problems

I'm testing my Vue project's logout function and it works like a charm on Chrome and Firefox. On IE 11, navigating to: localhost:8081/#/logout causes a lot of issues. User is logged out but logout ...
0
votes
1answer
21 views

Does this.$route automatically added to parameter when using this.$router.push()

Like the title said, when I'm using this.$router.push(), does this.$route automatically added to the parameter? I already asked a friend, and he said so. I'm myself not really sure if that is true. I ...
0
votes
1answer
20 views

VueJS + vue-i18n routing

Can't figure out how to set up routing and why the current configuration doesn't work. What I'm trying to accomplish: URL structure: http://example.com/en http://example.com/en/about-us http://...
1
vote
1answer
47 views

Lazy Loading Components not working with Vue Router

When trying to lazy load components in my routes.js file, my CSS is not compiled. When using an import statement at the top of the file, everything works as expected. There are no console errors or ...
0
votes
1answer
32 views

Route protect vue-router

I have admin dashboard on vue and I need to know is it enouth to protect this route by checking for example "isLoggedIn" flag from vuex getters? This flag changing after success login to "true" right ...
3
votes
3answers
109 views

Using vue.js and Auth0 how can i skip the login page if the user's already authenticated?

DESCRIPTION I have a pretty standard SPA built with vue.js where I'm using Auth0 to handle the authentication part by following the official example. The app flow is as follows: Register in the ...
-1
votes
2answers
25 views

Vue Router - Validate Paramater Is In Array

I have a route: /browse/:type/:id? How can I validate that :type is in an array of allowed values?
0
votes
0answers
31 views

VueJS - How to run a query once, and make sure that routes are only triggered once the query resolves?

I'd like to query for the current user session. Currently I'm doing it in the created hook in my App.vue. But that introduces a problem. Say I hit refresh on the /account page. What happens is that ...

http://mssss.yulina-kosm.ru