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!!
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
}
];
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.
I am a React dev. And I cant figure out how Vue route works.
import Vue from "vue";
import Router from "vue-router";
import DashboardDefault from "./Dashboard/DashboardDefault";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/dashboard",
name: "dashboard",
component: DashboardDefault
}
]
});
In above code DashboardDefaultis in proper folder. But when I navigate to /dashboard route, It does not work.
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: [...]
})
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)
})