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
}
];
Related
Thank you for reading this question.
I got a syntax error, but I can't find where.
I am using Vue.js & bootstrap, I am working on shopping cart functionality. In order for endpoints to work you need to pass a special authentication header:
Authorization: kazuhisa.noguchi.ghsd75#gmail.com
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import VueRouter from 'vue-router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import MainPage from './components/MainPage.vue'
import HelpPage from './components/HelpPage.vue'
import ProductPage from './components/ProductPage.vue'
import CategoryPage from './components/CategoryPage.vue'
Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(VueRouter)
const router = new VueRouter({
routes: [{
path: '/',
component: MainPage
},
{
path: '/help',
component: HelpPage
},
{
path: '/products/:productId',
component: ProductPage
},
{
path: '/categories/:categoryAlias',
component: CategoryPage
}
],
mode: 'history'
})
axios.defaults.headers.common['Authorization'] = 'azuhisa.noguchi.ghsd75#gmail.com';
axios.post("https://euas.person.ee/user/carts/").then(
response => {
new Vue({
render: h => h(App),
router: router,
data: {
cart: response.data,
saveCard() {
axios.put("https://euas.person.ee/user/carts/" +
this.cart.id, this.cart)
}
}
}).$mount('#app')
}
};
All my best,
I have already tried the suggestions stated regarding the hashbang (/#/) with Vue and Laravel, and it seems it still doesn't work for me.
routes.js
let routes = [
{
path: '/',
component: Home,
children: [
{
path: '/blog',
component: PageBlogLists,
},
{
path: '/post/:page_id',
component: PageBlog
}
]
},
];
export default new VueRouter({
// This does not work
mode: 'history',
routes
});
app.js
// Vue Router
import VueRouter from 'vue-router';
import router from './router/routes';
require('./bootstrap');
window.Vue = require('vue');
Vue.use(VueRouter);
const app = new Vue({
el: '#app',
router
});
Has anyone successfully tried removing it?
In case when vue-router is not used, store can be passed to child components when declaring new Vue()
But I am using both vue-router and vuex. In this case how can I make store available to components. For e.g. my store.js is typical:
import Vue from 'vue'
import Vuex from 'vuex'
import jwt_decode from 'jwt-decode'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(Vuex);
Vue.use(VueAxios, axios);
export const store = new Vuex.Store({
state: {
jwt: localStorage.getItem('t'),
endpoints: {
obtainJWT: 'http://0.0.0.0:8000/auth/obtain_token',
refreshJWT: 'http://0.0.0.0:8000/auth/refresh_token'
}
},
mutations: {
updateToken(state, newToken){
localStorage.setItem('t', newToken);
state.jwt = newToken;
},
removeToken(state){
localStorage.removeItem('t');
state.jwt = null;
}
},
actions:{
obtainToken(username, password){
//commented code
},
refreshToken(){
//commented code
},
inspectToken(){
//commented code
}
}
});
My main.js file is as below:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
import { store } from './store'
console.log(store)
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
And router/index.js file is as below:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import Signup from '#/components/signup/Signup'
import store from '../store.js'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login',
name: 'Login',
component: function (resolve) {
require(['#/components/login/Login.vue'], resolve)
}
},
{
path: '/signup',
name: 'Signup',
component: Signup
}
]
})
Now how can I pass store to my Signup component. Even though I am passing store in new Vue() it is not available in Signup component
I think the problem is that you importing store and you use the ../store.js,but when you import js file you dont have to use the .js so it has to be import store from '../store'
Also you dont have to pass the vuex store in components using vue-router.
So follow below the installation of vuex store and vue-router!
Vuex Store:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
propertiesName: 'PropValue'
},
getters: {},
mutations: {},
actions: {}
});
Vue-Router:
import Vue from 'vue'
import Router from 'vue-router'
import Page from '#/components/Page.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/Page',
name: 'Page',
component: Page,
},
//other routes
],
mode: 'history',
scrollBehavior(to, from, savedPosition) {
if(savedPosition){ //when use press back button will go at the position he was on the page
return savedPosition
}
if(to.hash){ //if has a hash positition to go
return { selector: to.hash } //go to the page in scrolled Position
}
return { x:0, y: 0 } //go to the page in scroll = 0 Position
}
})
main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { store } from '../store/store'
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
Note:Doing that,now you have access of router and store in all your components
To use the store in your components:
this.$store.state.propertiesName
To use the router in your components:
this.$router.push({name: 'Page'})
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 :)
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)
})