A have some problem in laravel 9 - empty page. Console have not any error or warrnings.
"vue": "^3.2.33",
"vue-loader": "^17.0.0"
Thanx a lot!
require('./bootstrap');
import {createApp} from 'vue'
import {createRouter} from 'vue-router'
const router = createRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});
import App from './components/App'
import Hello from './components/Hello'
import Home from './components/Home'
let app = createApp(App)
app.use(router).mount("#app")
Without prescribing a router, everything works. I don't understand where the error is during the initial setup Vue Router.
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 have been working on a web app and decided I needed to implement Vuex to help. I tried implementing it and messed up at first, but I don’t know what’s causing it now. I may be overlooking something but I just can’t find it, any help?
Router (index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Products from '../views/Products.vue'
import ProductListView from '../components/ProductListView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path:'/products',
name: 'Products',
component: Products,
children: [
{
path: ':ptype',
name: 'ProductListView',
component: ProductListView,
props: true
}
]
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
Store (store.js)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
}
})
export default store
App (main.js)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from 'store.js'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
I'm getting this error when I try running yarn serve in PowerShell
yarn run v1.22.4
$ vue-cli-service serve
'vue-cli-service' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
Hello apologise for my question could be very dummy but i was not able to find correct answer in google. I dont have access to this.$router in Vue. From what i found it says vue inject router as dependecy to every component. But still my this.$route do not shows up. I'm using Vue version 3.2.1 and vue-router 3.0.1 (selected from CLI when project it's generated). Im alowed to navigate tho. Everything seems to be correctly just this dependency $router i dont have access to it.
I tryed to research in google everything but unsuccessfully. What i found it was only that which says vue inject router as dependency to every component still unsucesfull to find as property to my class $router. Everything else works good tho, i mean router link, router view just property to reach params or query or redirect is missing.
How did you initialize your vue-router module with Vue ?
It should be like this :
import Vue from 'vue'
import VueRouter from 'vue-router'
// Include plugin
Vue.use(VueRouter)
// Initialize your router
const vueRouter = new VueRouter({
routes: [] // your routes
})
// Send your router to your Vue top component
const app = new Vue({
el: '#my-app',
router: vueRouter,
render: h => h(App)
})
import Vue from 'vue';
import './plugins/vuetify'
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
And i have separate file with my routes:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Signin from './views/Users/Signin.vue';
import Signup from './views/Users/Signup.vue';
import Profile from './views/Users/Profile.vue';
import AddPlace from './views/WorldPlaces/AddPlace.vue';
import AllPlaces from './views/WorldPlaces/AllPlaces.vue';
import DetailsPlace from './views/WorldPlaces/DetailsPlace.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/signup',
name: 'signup',
component: Signup
},
{
path: '/signin',
name: 'signin',
component: Signin
},
{
path: '/profile',
name: 'profile',
component: Profile
},
{
path: '/places/add',
name: 'addplace',
component: AddPlace
},
{
path: '/places/all',
name: 'allplaces',
component: AllPlaces
},
{
path: '/places/details/:id',
name: 'detailsplace',
component: DetailsPlace
}
// {
// path: '/about',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
// },
],
mode: 'history'
});
I have a index.js file inside router folder and here is the code, but the register component is not showing in /register route. Only the HelloWorld component is shown in all the routes.
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import Register from '#/components/Register'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/register',
name:'Register',
component:Register
}
]
})
You should set mode of router history, because default is hash router, it is not fire while history changes.
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import Register from '#/components/Register'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/register',
name:'Register',
component:Register
}
]
})
You should set history mode.
Cheers!!
I initialized a project with the vue-cli,and I just configured the router.
why is always open the 'HelloWorld' component when I try to enter: 'http://localhost:8080/HelloWorld2' or 'http://localhost:8080/HelloWorld1'.
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import HelloWorld1 from '#/components/HelloWorld1'
import HelloWorld2 from '#/components/HelloWorld2'
import HelloWorld3 from '#/components/HelloWorld3'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/HelloWorld1',
component: HelloWorld1,
// childres:[
// {
// path: 'HelloWorld3',
// component: HelloWorld3,
// },
// ]
},
{
path: '/HelloWorld2',
component: HelloWorld2
}
]
})
The vue-router uses hash mode by default. In your configuration, you probably want to use html5 history mode. See https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations for reference.
This can be changed in your Router setup:
const router = new VueRouter({
mode: 'history',
routes: [...]
})