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
Related
I'm very new to Vue and am trying to create a Vue app that can be embedded inside a non Vue app so I am using vue-custom-element. I am having trouble getting routing to work inside of my Vue app widget.
I have two components in my app - Schools and School.
in main.js I have this:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import vueCustomElement from 'vue-custom-element'
import Schools from "./components/Schools";
import School from "./components/Schools";
Vue.use(vueCustomElement);
const router = new VueRouter({
routes: [
{ path: '/', component: Schools },
{ path: '/school', component: School },
]
})
App.router = router;
Vue.customElement('schools-widget', App)
and then in my schools component (Schools.vue) I have
<router-link to="/school">School</router-link>
which I was hoping would link me from my Schools component to my School component.
But I get the error
Unknown custom element: <router-link> - did you register the component correctly?
What am I doing wrong?
You should inject the router to the component like that:
Vue.customElement('schools-widget', {
router,
render: h => h(App)
});
Update 1:
Just found out that you forgot to install the Vue router plugin:
Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Schools from "./components/Schools";
import School from "./components/Schools";
const router = new VueRouter({
routes: [
{ path: '/', component: Schools },
{ path: '/school', component: School },
]
})
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
I think your code should be like this.
I'm learning Vue.js 2.6.Here is my basic directory:
I need my home and blogs shares the same header and footer, so I imported my header and footer components separately in my home.vue and blogs.vue, but It didn't switch page smoothly when I click the link in the navigation bar. What can I do to make it smooth?
To make this project I turned to some case on the internet, after that I was confused when I saw its Router file structure:
It seems that I'm coding it as a MPA, but why is that index.js in Routers dir needed?
my home.js as below:
import Vue from 'vue'
import Home from './home.vue'
import router from '../../router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
el: '#homeDiv',
router,
components: { Home },
template: '<Home/>',
render:h => h(Home)
});
my index.js in Router dir as below:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from 'HelloWorld'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'App',
component: HelloWorld
}
]
})
and there's another main.js in the root of src dir, the author of that sample code did nothing to the initial App.vue and main.js. I just added some element-ui related code into index.js and main.js.
main.js:
import Vue from 'vue';
import App from './App';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//import './plugins/element.js'
Vue.config.productionTip = false;
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
new Vue({
el: '#app',
render:h => h(App)
})
I felt its Router looks like spaghetti, I can't see which code is needed, which is not. What is a GOOD Router structure in a vue.js MPA project?
THX
You have multiple questions being asked here.
What is the best router structure for vue-router?
I don't think there is a standard anywhere. A lot of codes I have seen adopted the style you have already. Which is fine depending on the scale of what you are building.
How to make a smooth transition between pages?
In my projects, I wrap the router-view component in the official vue transition component. As advised here in the official vue router documentation
Please let me know if these answers suffice.
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 trying to integrate vue-cli with webpack template in an existing backend home-made framework. The websever is apache
I want the vue-js application to be loaded and mounted when the url example.com/vue.
When I go to this URL I can see the basic example vue-component but one second after I'm redirected to example.com/#/
Do you have any idea how to solve this and where does the problem come from?
Router.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '#/components/Hello'
Vue.use(Router)
export default new Router({
mode : 'history',
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
Main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
I had to defined my path as the following path: '/vue' in the router.js file. If vue-router does not find the route it will redirect to index.php
I have an application like
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './routes.es6';
Vue.use(VueRouter);
new Vue({
router,
}).$mount('#app');
routes.es6 contains my router module:
import VueRouter from 'vue-router';
import Index from './pages/index.vue';
const routes = [
{
path: '/',
name: 'index',
component: Index,
},
...
];
export default new VueRouter({
routes,
});
This works but has one major drawback. Let's assume my index component is defined as follows
<template>
...
</template>
<script>
require(...)
export default {
...
};
</script>
Now all require and import statements are evaluated once the components are imported in the routes.es6 file and they are injected in the main app even though they should be scoped to the specific route.
How to overcome this?
It is called - LAZY LOADING
It is explained well in Vue-Router docs.
https://router.vuejs.org/en/advanced/lazy-loading.html