Questions tagged [vue-router]

0

votes
0

answer
5

Views

How to render contents based on the params received from vue-router?

I am using Vue 3.6.3 to build a film list page. The home page shows a list of films, only includes the brief information of each film, and the user can click the title of the header of each film to enter a page where there is detail information about the film. I use the vue-router to help me with th...
Gary Yuan
0

votes
0

answer
3

Views

how i can generate pages from library components from api?

In my project with nuxt.js need generate dynamic pages like items/_id from api. every page can use any of 9 components, sometimes this components can be more than 1 on page with various data/props. dunno somethink like that where keys parent object is order. type in children - what component, and o...
Remi Fokz
1

votes
2

answer
382

Views

Prevent url from appearing or modifying current address bar value

I have this vue js script const NotfoundComponent = { template: 'Not found' }; const HomeComponent = { template: 'Home' }; const AboutComponent = { template: 'About' }; const routes = [ { path: '/', component: HomeComponent }, { path: '/about', component: AboutComponent }, { path: '*', component: No...
Gandalf
1

votes
3

answer
82

Views

How to access a property of the inital app instance, in a .vue component template?

I've set up a new Vue app with the vue-cli. I have vue-loader and and vue-route also running in this project. How do I access a property events in the following instance? Currently, the below code results in the following error: Property or method 'events' is not defined on the instance but referenc...
DevLime
1

votes
2

answer
52

Views

Axios Vue.js Pass an array of objects from store.js to component

I am struggling with the Vue.js so i would like your help. I want to do something too simple but unfortunately without luck. In the store.js i have an axios fetch that return the data from the called API. My next step is to pass the object in the component. I succeed to do it using this.$store.dis...
Ioan Dimi
1

votes
0

answer
1.5k

Views

How to access route query parameter when creating component?

When I create or mount my component, this.$route.query is undefined, but it should contain the URL get parameters, eg. ?page=3. I'm making a paginated API browser. Upon mounting my component, I'm constructing an object (to fetch data) that needs the URL query parameter 'page' if it is present ('/adm...
icarito
1

votes
0

answer
591

Views

Passing static props and dynamic params to Vue route with multiple components

I have a Vue route I've set up to show courses in a degree program at a school. { path: '/courses-by-degree/:degree', components: { sidebar: Sidebar, content: Grid }, props: { sidebar: { title: 'Fulfills', type: 'all', degree: '', keyword: '' }, content: { type: 'degree', degree: 'English', keyword:...
Sean Beck
1

votes
0

answer
230

Views

about vue-cli refresh page,the page show lot of errors Uncaught SyntaxError: Unexpected token <,

I'm new to vue, and I use vue-cli to build a project, and turn the mode to history in router/index.js. When I run it locally,it does work and shows no errors, but when I release it on the server, it does work too. However, when I go to the next page, and I refresh the page, it doesn't work,and sho...
yulingsong
1

votes
3

answer
408

Views

Laravel dusk doesn't see vuejs selectors

Hey guys I am trying to run laravel dusk with vuejs and I got an error 1) Tests\Browser\UserCreateTest::testAdminCanCreateAnotherUser Facebook\WebDriver\Exception\TimeOutException: Waited 5 seconds for selector [.users]. This is my test $this->browse(function (Browser $browser) { $user = User::find...
Artem Petrusenko
1

votes
1

answer
609

Views

Redirect Vue-Router on error in props function

I have this route definition: {name: 'article', path: '/article/:id', component: Article, props: true} And this component (I use Typescript and vue-class-component): @Component({ props: { id: Number } }) class Article extends Vue { id: Number; } Of course, this give me this warn [Vue warn]: Invali...
Varkal
1

votes
0

answer
92

Views

Watching '$route' in Vue.js

Watching the route with (to, from) is easy. This issue i'm having is to know when I moved between 'top' components. What I mean is that I have 2 routes: { path: '/', component: '/home', children: [ { path '', redirect: 'a' }, { path: 'a', component: A, children: [ { ..... } ] }, { path: 'b', compon...
Chen
1

votes
0

answer
178

Views

VueJS - route.go doesn't work

When i try redirect to other router in watcher, console gives me this error: Can somebody help me and tell why is this happening? Thanks! watch: { lifes : function() { console.log('lifes watcher work') if(this.lifes === 0) { this.$route.router.go('/ending'); } } }, I find other ways like this.rout...
Mateusz Kawka
1

votes
0

answer
289

Views

Vue router lazy loading issue when reloading page

So I've been playing with vuejs lazy loading feature. This is how my router looks like: import Vue from 'vue'; import Router from 'vue-router'; const MyComponent= () => import('../components/MyComponent'); Vue.use(Router); export default new Router({ routes: [ { path: '/component', component: MyCom...
kljuco
1

votes
1

answer
169

Views

How to intercept events when navigator changes in a Weex app?

I use vue-router in my weex app, and manage jumping in pages by this.$router.push and this.$router.go(-1). However, my weex app is a SPA, and when clicking the RETURN entity key in Android, the whole page is closed. How can I intercept events when clicking the RETURN entity key in Android and stop i...
尹雄拼
1

votes
0

answer
234

Views

vue-router: decoupling data fetching from component

In vue-router, there's a technique for decoupling components from their routes by using props instead of watching $route directly. There's also a technique for fetching data before route navigation. My issue is that I can't figure out how to combine these two techniques without increasing the coupli...
James
1

votes
1

answer
949

Views

vue-router redirect not working on route push

I have the following router configured: const router = new Router({ mode: 'history', routes: [ // root { path: '/', component: ComponentPage, redirect: routePrefix.public, children: [ // public { path: routePrefix.public, component: ComponentPage, redirect: `${routePrefix.public}/login`, children: [...
Tobias Würth
1

votes
0

answer
370

Views

How to add parameter in beforeEach

router.beforeEach((to, from, next) => { if (auth) { next() } else { next('/') } }) Using vue-router beforeEach controls auth, if success true go next otherwise redirect to '/'. it's working, but I wish redirect to home '/' and pop up the login dialog. So I change to this: next({path: '/', params: {...
Jiu
1

votes
2

answer
654

Views

Vue Router beforeRouteEnter API call response not 'working'

I cannot see why the function is not returning its call back correctly. I have a list of vehicle on one route and then another route to display that vehicles resource. This is what I have in my Single file component for the single vehicle resource: export default { data() { return { vehicle: null, e...
Lovelock
1

votes
0

answer
823

Views

Vue + Nuxt - Different page transitions on button click

I am building a Vue app and started with NuxtJS. NuxtJS has an build-in page transition module so adding page transitions was easy, but now I want to display a different transition when I click a specific button. So: I'm on route '/test', and when I click on the Menu to '/posts', it has to fade, but...
coder14
1

votes
0

answer
750

Views

How to programmatically set $route.params when testing a Vuejs component

I have a Vue.js component that has different behavior according to the $route.params or $route.query. Something like: {{query}} export default { name: 'hello', data () { return { } } }, computed: { 'query': () => { return $route.params.query } } } How can I write a unit test spec where I can program...
Overdrivr
1

votes
0

answer
527

Views

Vue ,listen to route param change but not child route change?

I have the following structure in vue.js ,using vue-router. routes: [ { path: '/domains', component: ListOfDomains }, { path: '/domain/:domainName', component: Domain, children: [{ // Photos Tab content will be rendered inside domain's // when /domain/:id/photos is matched path: 'posts', name: 'p...
Sainath S.R
1

votes
1

answer
47

Views

How can I choose a time at first and use it for all the days in vue js?

I am collecting the working hours from user. Now the user need to select time for each day. It will be time consuming for them. So, make them choose a time first and use that time for all the days selected. If he need to change time for a particular, make him to do that. This is the first time i am...
1

votes
0

answer
120

Views

error when rendering routes in vue.js

I just started using vue.js and vue-router in a small SPA, and I have a problem structuring my routes tree .. firstly I have a parent component, which basically have two child components that are my navigation and footer menu, within this parent component of name Full.vue I want all my routes to be...
FeRcHo
1

votes
0

answer
1.3k

Views

Error: Loading chunk 0 failed

I'm using Buefy with Laravel and have the following routes Laravel Route::get('/{vue?}', function () { return view('app'); })->where('vue', '[\/\w\.-]*')->name('app'); Then VueJS ...routes = [ { path: '/', component: MainLayout, children: [ { path: '/home', component: Home, name: 'home' }, { path: '...
Kendall
1

votes
0

answer
50

Views

vue-router: how to detect dead links?

When using vue-router, how can I find dead links? If it's not SPA, you can find such dead links by using, for example, this or any similar crawler. However, SPA, or vue-router specifically in my case, does not return 404 and thus the dead link cannot be detected. vue-router actually complains about...
akai
1

votes
0

answer
408

Views

Vue.js router not calling beforeRouteUpdate (typescript)

I have a component that contains router-links to the same route, but with a different parameter. When navigating to those links, the url changes but the data isn't updating. I have beforeRouteUpdate defined, but it is never called. import Vue from 'vue'; import { Component } from 'vue-property-decor...
Erik
1

votes
2

answer
1.2k

Views

vue.esm.js:578 [Vue warn]: Missing required prop: “id”

I use the dynamic route in the detail component: dataCenterDetail: '/data-center/detail/:id' in the component there is a props with id: export default{ props: { id:{ type: Number, required: true } }, when I push to the detail route: in the browser: http://localhost:8080/data-center/detail/1 I will...
244boy
1

votes
1

answer
61

Views

onclick action slower than css :focus selector switch

I'm working with vue.js, vue-router and vue-material in my application. I have a search bar in which you can perform a global search for artists, releases and records. this looks somewhat like this: The result div is currently only displayed if the input form has focus. I do this like this in css: ....
Tobias Würth
1

votes
0

answer
1.4k

Views

Vue.js vue-router: How to go back without a page reload?

Here is the crux of the problem: Things to note: The query is updated in vuex on input/search After a product click, a user is moved using user.push('/product/'+ asin) When moving back, I tried both router.push('/') as well as router.go(-1) Every time the user returns, the value of query is lost and...
dsp_099
1

votes
0

answer
1k

Views

VUE JS Relative Path Issue

I have a vuejs simple project and deploy it on my hosting. first is I build it on production mode using: npm run build then I have a url which is www.sample.com/vue-project/ and I put the production version of my vuejs project there. when I visit the link everything behaves okay. When I click on the...
Sam Teng Wong
1

votes
0

answer
336

Views

How to retrieve data from the url in Vue using window.location.href

I have data that I would like to pass to another page. Using this.$router.push({ name: 'toAnotherPage', params: { info: this.info}}) works very well just that it is not refreshing the new page since I'm using SPA. If I can have it refresh the new page I would be fine. Using window.location.href = '/...
Justin
1

votes
0

answer
588

Views

Vue router doesnt work in the production environment

I am making a vue-cli application using the webpack template, so far when I run: npm run dev everything renders perfectly and my route works fine. But after running: npm run build I had my dist folder created with the new index.html file and I run my app in production with my server.js file using th...
Christopher
1

votes
0

answer
34

Views

how to write routes in a laravel + vuejs 2 + vue-router + vue-axios project?

this is how i've set the files in /ressources/assets/js/ file: /js/router/index.js & /js/router/mainRoutes.js, i wish to put my routes in mainRoutes.js /js/store/index.js for state management (this is how i code in a solely vuejs project) my app.js file: const app = new Vue({ el: '#app', router, st...
Michel Tchoutang
1

votes
0

answer
289

Views

How to generate routes based on file tree (like Nuxt.js) for vue-router?

Nuxt.js generates its routes based on file tree. Snnipets from the official page: pages/ --| _slug/ -----| comments.vue -----| index.vue --| users/ -----| _id.vue --| index.vue From which Nuxt.js generates: router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'user...
akai
1

votes
1

answer
252

Views

vue-router's beforeEach guard exhibiting weird behaviour occasionally

I've got the following code: const routes = [ { path: '/', component: FooView }, { path: '/bar', component: BarView } ]; const router = new VueRouter({ routes }); router.beforeEach(function(to, from, next) { if (to.path === '/bar') { next('/'); } next(); }); If I've omitted too much and you nee...
Billy Monk
1

votes
0

answer
343

Views

Dynamic data not rendering in prerender-spa-plugin

I use prerender-spa-plugin in vue.js app for rendering html but it can't render dynamic data. when prerender-spa-plugin complete rendering created html file only contains some html code not showing any dynamic data Method Mounted prerender-spa-plugin Configuration
Manzur Ahammed
1

votes
1

answer
61

Views

I tried to add multiple images using vue js html, but getting error as illegal invocation?

My html code is Name Phone Add Another Phone Signature List of files {{ file.name }} Add My vue js code is addForm = new Vue({ el: '#addForm', data: { name: '', phone:[ { mobile: null, }, ], files: [], }, methods: { addNewRow: function() { this.phone.push({ mobile: null, }); }, uploadFiles: function...
Wanderer
1

votes
1

answer
975

Views

vuejs history mode routing

How do I route to longer URL paths with history mode? example: /catalog/[product-name]/p/[product-id] The site just goes blank with history mode on. With errors of the following type on my CSS and JS Refused to execute script from '{URL}/catalog/[product-name]/p/dist/build.js' because its MIME type...
asdasdasdasdqwe
1

votes
1

answer
1.4k

Views

Vue router not loading component

So ive been looking into vue and been experiencing an issue which i cant seem to find the solution for. Im using Vue and Vue-router. I started with the basic vue + webpack template which gave the initial boilerplate. I've successfully added additional routes to the predefined routes which is workin...
Tommy B.
1

votes
0

answer
355

Views

vue-router doesn't recognize $ref from a component after routing

I'm new with Vuejs and vue-router I've been reading a lot View documentation and forums to figure this out. I can make my routing working well. But I can't (easily) the 'ref' from the content that was routed. I say 'easily' because I found on 'this.$children[0].$children[0].$refs' which doesn't look...
AEsmerio

View additional questions