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: MyComponent,
}
]
});
Everything works fine when I get to this route via router-link but then when I try to refresh the page nothing happens (it just renders blank page without any errors), and this is how my vue dev tools looks like:
Related
I have tried to access to others pages via url, but those pages never loads
http://localhost:8080/index
http://localhost:8080/about
This is my main.js file
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
import Index from './views/Index';
const About = { template: '<p>about page</p>' }
const routes = [
{ path: '/index', name: 'index', component: Index },
{ path: '/about', name: 'about', component: About }
]
var router = new VueRouter({
routes: routes,
mode: 'history'
})
new Vue({
router: router,
vuetify,
render: h => h(App)
}).$mount('#app')
Does anyone can help me with vue-router? i am new in this framework
Does it work if you access them like this:
http://localhost:8080/#/about
If yes, your vue-router is working in the default hash-mode. To get rid of the hash and get "normal" URLs you'll need to set it to history mode.
Edit:
As I see you're already using history mode. Do you use Vue CLI for local development? This should normally work out of the box. If not, you need to setup some redirect rules on other web servers. Please see the examples here: Example Server Configurations
Edit 2:
Can you show your App component?
I tried to reproduce your problem in a sandbox, but it works: https://codesandbox.io/s/confident-voice-zyg07
The App component here looks like this, including the router-view:
<template>
<div id="app">
<router-view id="page"/>
</div>
</template>
<script>
export default {
name: "App",
components: {}
};
</script>
my main.js file has the following
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
import EventIndex from '../src/views/EventsIndex.vue';
import EventsTable from '../src/components/EventsTable.vue'
import { routes } from '../src/router/routes';
Vue.use(TurbolinksAdapter);
Vue.use(VueRouter);
const router = new VueRouter({
routes,
mode: 'history'
});
document.addEventListener('turbolinks:load', () => {
var element = document.getElementById('vue_code');
if (element != null) {
new Vue({
el: '#vue_code',
Store,
router,
render: h => h(EventIndex)
});
My routes.js file has the following:
import Vue from "vue/dist/vue.esm";
import VueRouter from "vue-router";
import EventForm from "../components/EventForm";
Vue.use(VueRouter);
const routes = [
{
path: "/events/new",
name: "EventForm",
component: EventForm
}
];
The router-link snippet from my component file EventsTable.vue file has the following:
<template lang=haml>
...
%tbody
%tr{v-for: "event in events"}
%td
%router-link.fa.fa-pencil{to: "/events/new"}
%router-view
...
<template>
<script>
import EventForm from './EventForm';
components: {
EventForm
}
</script>
When I click on the link, i expect the page to change to the EventForm page. Instead, the url changes, but the browser window does not change. But once I reload the page, the browser jumps to the EventForm page.
Any help is appreciated. Thanks
The first line of the vue-turbolinks package states:
⚠️ If you're using vue-router or another Javascript routing library, you don't need to use Turbolinks or this adapter. Turbolinks is meant to level up the traditional request-render cycle by loading the new page in the background and this adapter makes it possible to use Vue components on pages rendered in this manner. If you've decided to use a single-page app, you already have everything you need. 🤘
You cannot use vue-router and Turbolinks together. Turbolinks handles all of your site navigation. Navigating using vue-router doesn't work because it is attempting to do a history push instead of an entire page load.
I suggest programmatically routing using the Turbolinks.visit() function instead of using vue-router. You'll need to create a new view for the EventForm page that loads your vue component.
I'm new to vue and building my first app. I was following a tutorial and noticed a way to lazy load in the router:
import Vue from 'vue'
import Router from 'vue-router'
import MainContent from '#/layout/main-content.vue'
import Home from '#/views/home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: MainContent,
children: [
{
path: ''
//This works
component: Home
//This doesn't work
component: () => import('#/views/home.vue')
},
{
path: 'home'
//This works
component: Home
//This doesn't work
component: () => import('#/views/home.vue')
}
]
}
]
})
You can see in the above example, I'm showing the synchronous way and the asynchronous way. There are two paths to the home component because I need to be able to support the root '/' and the '/home' as the default. That's not the issue because it works the synchronous way (plus, I tried it with other child routes).
The strange thing is when I lazy load, the page doesn't refresh (hot load) until I inspect using the browser tool. Even when I force a refresh in the browser, it doesn't appear. When I open the inspector, then I see the home component in the browser. Why would I only see the Home component when I open the inspector?
I want to use routing in my vue project, but don't register many components globally, I am having trouble here.
My project uses vue-cli and vue-router
My project idea is to register these subcomponents only in the parent component that uses the corresponding subcomponent, but I want to use routing to control the presentation of these components.
My code is as follows
Main.js
import Vue from "vue";
import App from "./App";
import VueRouter from 'vue-router'
import test from "./components/test.vue"
Vue.use(VueRouter)
Vue.config.productionTip = false;
const routes = [
{
path: '/test', component: test,
}
]
const router = new VueRouter({routes: routes});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div>
<main-layout>
<router-view></router-view>
</main-layout>
</div>
</template>
<script>
import MainLayout from "./components/MainLayout.vue"
import test from "./components/test.vue"
export default {
components: {
"main-layout": MainLayout,
"test": test
},
name : "app",
data(){
return {
collapsed: false,
}
},
}
</script>
Just like the code above, I have to register every component that needs to be managed by routing in main.js and app.vue. These are cumbersome and the code is not beautiful. Is there any way or plugin to solve this problem?
You can move all the routing code to a different folder (possibly named router).
Inside the folder you can have a file called index.js that builds the router and move individual routing components to different files.
Each router component should only return router information and not a router object.
You'll still need to import individual vue components, but they'll be scattered across multiple files. This should make things tidier.
In your main.js will need to import the router, something similar to this
import router from './router'
....
Vue.use({
router
})
This is a possible folder structure for your router:
This is part of router/index.js that shows how to use routes defined in other files
import Vue from 'vue'
import Router from 'vue-router'
import API from '#/api'
import DashboardRoutes from './dashboard'
import CustomerRoutes from './customer'
import MaintenanceRoutes from './maintenance'
import DashboardStudioRoutes from './studio'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/api',
name: 'Api',
component: Api
},
DashboardStudioRoutes,
DashboardRoutes,
CustomerRoutes,
MaintenanceRoutes,
{
path: '*',
name: '404',
component: NotFound
},
],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
I'm updating my laravel website to vue spa, I have just 2 routes in vue at the moment for test purpose.
When click of terms link from page, it works fine and render the component.
But as I refresh /terms page app throws the 404 error.
Any guess what is going on.
routes.js
import Home from './components/Home.vue';
import Terms from './components/Terms.vue';
export const routes = [
{
path: '/',
component: Home
},
{
path: '/terms',
component: Terms
}
];
app.js
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import {routes} from './routes';
import StoreDate from './store';
import MainApp from './components/MailApp.vue';
Vue.use(VueRouter);
Vue.use(Vuex);
const store = new Vuex.Store(StoreDate);
const router = new VueRouter({
routes,
mode: 'history'
});
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('tasks', require('./components/Tasks.vue'));
const app = new Vue({
el: '#app',
router,
store,
components: {
MainApp
}
});
Following this video guide
https://www.youtube.com/watch?v=6FSa6XET8MY
You will need to add the terms route in Laravel too, or return your spa view on 404 in Laravel web routes