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
Related
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 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
I'm learning Vue, and started of with the webpack template. The first thing I'm trying to do is to add support for Vue Router, but I've spent several hours on it now without being able to render a single route (I always end up with a blank page). Frustrating!
I simply want to have a single .vue file, acting as the layout file, into which different .vue files, acting as "pages", are rendered into. Can someone tell me how to do this, please? Here's my latest failed attempt:
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './components/Home'
import About from './components/About'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const app = new Vue({
router: new VueRouter({
routes
}),
component: App
}).$mount('#app')
App.vue (the layout file)
<template>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Foo</router-link>
<router-link to="/about">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
components/About.vue (almost identical to components/Home.vue)
<template>
<div>
<h1>About</h1>
<p>This is the about page!</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
I finally got it to work. The main.js file should be written like this:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './pages/Home'
import About from './pages/About'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router,
template: '<App />',
components: {
App
}
}).$mount('#app')
I hope this saves hours of trouble for someone else.
EDIT
The following:
const app = new Vue({
router,
template: '<App />',
components: {
App
}
}).$mount('#app')
can preferably be replaced with:
const app = new Vue({
router,
render: function(createElement){
return createElement(App)
}
}).$mount('#app')
I found out how to get main.js to call the index.js file in folder router and work with the routes defined there:
I had created my app via the VUE UI (with VUE 3.1 and CLI/3)
In the VUE UI there is an option to add plugins. I chose the router plugin (route) and it asked if I want to install a new route or install the framework. (You first need to install the framework...)
It then changed my main.js file to have the following: (the additions are marked with comments)
import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router' // added by router plugin
Vue.config.productionTip = false
new Vue({
router, // added by router plugin
render: h => h(App)
}).$mount('#app')
It also added a new folder router and in it index.js with the code
import Vue from 'vue'
import VueRouter from 'vue-router'
// import Hello from '#/components/HelloWorld' // #pashute: I added this later...
Vue.use(VueRouter)
const routes = [
// {
// path: '/',
// name: 'Hello',
// component: Hello
// }
]
// eslint-disable-next-line no-new
const router = new VueRouter({
routes
})
export default router
It also installed the latest router package and added a link in the HelloWorld component to the router documentation.
By the way, notice the extra name: in the route definitions.
Build A Single page app with vue 2 and vue-router 2 and vuex 2, but do not update
/src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'
sync(store, router)
new Vue({
router,
store,
...App
}).$mount('#app')
/src/router/index.js
import Vue from 'vue'
import routes from './routes'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes
})
export default router
/src/router/routes.js
import loader from './loader'
const routes = [
{ path: '/index', name: 'index', component: (r) => require(['./../views/index.vue'], r) }
]
export default routes
/src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {}
})
export default store
/src/view/index.vue
<template>
<div>
<h1>Hello index</h1>
</div>
</template>
<script>
import loader from './../../../router/loader'
export default {
name: 'index',
created () {
console.log('This is index')
}
}
</script>
/src/App.vue
<template>
<div id="app">
<router-link :to="'index'">index</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
mounted () {
console.log('Hello App')
}
}
</script>
I do not know what's wrong with the code, the <router-view> do not update when I change the route.
I think your app is not properly initialized yet. You are starting your app as follows:
new Vue({
router,
store,
...App
}).$mount('#app')
You have the spread operator ...App, which is not necessary - it is used to convert array items to function args, and not correct in this context. Instead you should use the render function as provided in webpack template :
/* eslint-disable-line no-new */
new Vue({
el: "#app",
store,
router,
render: h => h(App)
})
Also you have attempted to import loader in routes and index, which is not necessary if you are using vue-cli.
Maybe you can start with the webpack template as base and slowly add functionality one step at a time: start with route definitions and your route components, ensure that everything works, and finally add vuex.
$mount('#app') is fine, I think the problem is your routes.js
Try this instead:
import Index from './../views/index.vue'
const routes = [
{ path: '/index', name: 'index', component: Index }
]
And here is a working webpack template which is already configured vue-router and vuex properly, you can initialize this template via vue-cli, for your reference: https://github.com/CodinCat/vue-webpack-plus