my main.js looks like:
import Vue from 'vue'
import VueRouter from './router'
import routes from './router/index.js'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode: 'history'
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
Im trying to remove the hashtag from the url...
Im using Webpack for the development and as you can see im importing the routes file.
I'm seeing this error everytime
"Uncaught TypeError: WEBPACK_IMPORTED_MODULE_1router__.a is not a
constructor"
Does anybody have a good doc for router?
this is the /router/index.js file
import Vue from 'vue'
import VueRouter from 'vue-router'
import Settings from '#/components/Settings'
import Login from '#/components/Login'
Vue.use(VueRouter)
export default new VueRouter({
routes: [{
path: '/',
name: 'Login',
component: Login
},
{
path: '/Settings',
name: 'Settings',
component: Settings
}
]
})
the import statement of the VueRouter should be
import VueRouter from 'vue-router'
EDIT
You are setting up the VueRouter in ./router/index.js file itsels , so add the mode:'history' property there itself
./router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Settings from '#/components/Settings'
import Login from '#/components/Login'
Vue.use(VueRouter)
export const router = new VueRouter({
mode: 'history',
routes: [{
path: '/',
name: 'Login',
component: Login
},
{
path: '/Settings',
name: 'Settings',
component: Settings
}
]
})
main.js
import Vue from 'vue'
import {router} from './router/index.js'
new Vue({
el: '#app',
router,
render: h => h(App)
})
Related
I’m using vue-router version "^4.0.13". when I want to run (npm run watch) the following errors occur
WARNING in ./resources/js/app.js 7:8-17 export 'default' (imported as
'VueRouter') was not found in 'vue-router'
My project files are
app.js
require("./bootstrap");
window.Vue = require("vue").default;
import Vue from "vue";
import VueRouter from "vue-router";
import { routes } from "./routes";
Vue.use(VueRouter);
Vue.component(
"employees-index",
require("./components/employees/Index.vue").default
);
const router = new VueRouter({
mode: "history",
routes: routes
});
const app = new Vue({
el: "#app",
router: router
});
routs.js
import EmployeesIndex from "./components/employees/Index";
import EmployeesCreate from "./components/employees/Create";
import EmployeesEdit from "./components/employees/Edit";
export const routes = [
{
path: "/employees",
name: "EmployeesIndex",
component: EmployeesIndex
},
{
path: "/employees/create",
name: "EmployeesCreate",
component: EmployeesCreate
},
{
path: "/employees/:id",
name: "EmployeesEdit",
component: EmployeesEdit
}
];
I am trying to access the router in the interceptor of axios, but when I import the file in a .js Axios file, an error Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > <template> occurs.
Here is a sample of the router.js file:
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const router = {
base: process.env.BASE_URL,
routes: [
{
path: "/settings",
name: "settings",
component: require('#/views/Settings.vue'),
}
]
};
export default new Router(router);
And the interceptor file contains:
import router from './router';
Why do you using require('#/views/Settings.vue')?
Instead try to use import function.
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = {
base: process.env.BASE_URL,
routes: [
{
path: '/settings',
name: 'settings',
component: () => import('#/views/Settings.vue'),
},
],
};
export default new Router(router);
PS: Answer your comment.
In main.js file export the instance variable:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
let vm = new Vue({
router,
render: h => h(App),
}).$mount('#app');
export default vm; // ATENTION HERE
In axios.js file import the main.js and access the $router:
import vm from './main.js';
...
// YOUR INTERCEPTOR
vm.$router.push({ name: 'settings' });
...
So I have a simple router file, that imports different routes for different parts of my website, so:
general.js (one of my route files)
import Home from '../../components/home/home'
const routes = [{
name: 'home',
path: '/',
component: Home
}]
export default routes
router.js
import Vue from 'vue'
import Router from 'vue-router'
import GeneralRoutes from './general'
Vue.use(Router)
const routes = Array.prototype.concat(
GeneralRoutes
)
const router = new Router({
mode: 'history',
routes
})
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
next({replace: true, name: 'login'})
}
next()
})
export default router
That is my router, now in my app.js, I simply use it like so:
import Vue from 'vue'
import Router from './core/routes/router'
new Vue({
el: '#app',
data: () => ({
user: ''
}),
Router,
});
But this is throwing an error saying the following:
[Vue warn]: Error in render: "TypeError: Cannot read property
'matched' of undefined"
When I console.log the router, I get the following:
router is lowercase
import Vue from 'vue'
import Router from './core/routes/router'
new Vue({
el: '#app',
data: () => ({
user: ''
}),
router: Router
});
I am trying to integrate vue-router in my app. In my admin.js, I have:
import Vue from 'vue'
import Router from 'vue-router'
import AdminHome from '../admin/home.vue'
import AdminMetroArea from '../admin/metro-area.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/metro-areas/', name: 'metro-areas', component: AdminMetroArea },
{ path: '/', component: AdminHome }
]
})
document.addEventListener('DOMContentLoaded', () => {
const admin_home = new Vue(AdminHome).$mount('#vue-admin-home');
})
and I call like:
<td>my metro: <router-link :to="{ name: 'metro-areas' }">{{metro_area.metro_area}}</router-link></td>
but I get the following error:
How do I configure my Vue app to pick up my router?
the Router needs to be supplied to Vue during initialization, explicitly:
new Vue({
router: Router
})
Where Router is your import Router from '...path'.
In Main.js file do the following thing:
import router from './router'
where './router' would be the path of your router file.
then,
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
},
data() {
return {}
}
})
Than, supply it to the Vue in the same file (Main.js). HAPPY CODING :)
Vue component can not get this.$router, but get this.$route in App component, what could be wrong?
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import store from './store'
import FeedView from './views/FeedView.vue'
import LoginView from './views/LoginView.vue'
Vue.use(VueRouter)
Vue.config.devtools = true
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: FeedView },
{ path: '/login', component: LoginView },
]
})
new Vue({
router,
store,
el: '#app',
render: h => h(App)
})
capture image of vue-devtools
It is clearly explained in vue-router docs: https://router.vuejs.org/en/api/route-object.html
The route object can be found in multiple places:
Inside components as this.$route
Inside $route watcher callbacks
As the return value of calling router.match(location)
If you want to use e.g. router.push(), based on your code, you definitely should be able to use this.$router.push()