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: [...]
})
Related
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/views/Home.vue'
import Load from '#/views/Load.vue'
import Login from '#/views/Login.vue'
import Main from '#/views/Main.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: Home
},
{
path: '/load',
name: 'loading',
component: Load
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/main',
name: 'main',
component: Main
}]
})
I connected the router correctly.
But https://sh031224.github.io/portfolio/ the inside of '#app' is empty.
How can I do?
My github is https://github.com/Sh031224/portfolio
And github page is https://sh031224.github.io/portfolio/
You need to set base in your router configuration to "/portfolio/"
See the docs
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'm trying to use vue-router to link url's to their corresponding components.
My issue is that only the root url ('/') can link to the correct component and any other url (e.g. '/first') does not link to their component. All of them link to the component which belongs to the '/' url.
When I use "a" tag in the vue file it will route to the right component - it's only when I input the url directly into the browser that it doesn't work
main.js:
import Vue from 'vue'
import router from './router/index.js'
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
// components: { App },
render: h => h(App)
})
index.js:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
import First from '../components/firstPage.vue'
import Login from '../components/logIn.vue'
Vue.use(Router)
const routes =[
{
path: '/',
component: Login
},
{
path:'/first',
component:Hello
}
]
const router = new Router({
routes
})
export default router
I think you can also try as below. It's works, just try it! You can add mode: 'hash', to give default # in all urls.
import Vue from 'vue';
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
import First from '../components/firstPage.vue'
import Login from '../components/logIn.vue'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
base: '/your_base_name_if_you_want',
linkActiveClass: 'active-tab', //if you w
routes: [
{
path: '/',
redirect: '/if_you_want_to_redirect',
name: 'Login', //Whatever
component: {
render (c) { return c('router-view'); }
},
children: [
{
path: '/',
component: Login
name: 'Login',
meta: { title: 'Your title name' }
},
{
path:'/first',
component:Hello
name: 'Hello',
meta: { title: 'Your title name' }
}
]
}
]
})
export default router
You can also remove it from your urls using:
var router = new VueRouter({
history: true
});
Hope this helps you!
The default mode for vue-router is hash mode
This is why you can't get the 'Hello' component when your url is '/first'. Instead you can try input '/#/first'.
If you want to use history mode like '/first', set the mode attribute for your route object like this.
const router = new Router({
mode: 'history',
routes
})
Hope it helps you.
I'm working on a VueJs project and now structuring my router records. I've realized I could be having different components having same name. How do I import them and use them in the route records? How do I make their names unique when configuring the router?
import Vue from 'vue'
import Router from 'vue-router'
import AllUsers from '../components/Sales/AllUsers'
import AllUsers from '../components/Finance/AllUsers'
...
export default new Router({
routes: [
{
path: '/', name: 'home', component: Home
},
{
path: '/sales/users', name: 'sales-users', component: AllUsers
},
{
path: '/finance/users', name: 'finance-users', component: AllUsers
}
I have used a hypothetical example here (since I could as well call the components SalesUsers and FinanceUsers) but you will agree there are times when components will really have same name. How do I handle that, given that I need to specify the component for each route record?
PS: Slightly new to VueJS, so advice on improvements and best practices is welcome.
Since your exports are default you can choose any name during import:
import Vue from 'vue'
import Router from 'vue-router'
import AllSalesUsers from '../components/Sales/AllUsers'
import AllFinanceUsers from '../components/Finance/AllUsers'
// ...
export default new Router({
routes: [
{
path: '/', name: 'home', component: Home
},
{
path: '/sales/users', name: 'sales-users', component: AllSalesUsers
},
{
path: '/finance/users', name: 'finance-users', component: AllFinanceUsers
}
]
})
You can also import the components while defining the routes.
import Vue from 'vue'
import Router from 'vue-router'
...
export default new Router({
routes: [
{
path: '/', name: 'home', component: Home
},
{
path: '/sales/users',
name: 'sales-users',
component: ()=> import('../components/Sales/AllUsers')
},
{
path: '/finance/users',
name: 'finance-users',
component: ()=> import('../components/Finance/AllUsers')
}
If is not the default export you can use this:
import { AllSalesUsers } from '../components/Sales/AllUsers'
import { AllSalesUsers as AllFinanceUsers } from '../components/Finance/AllUsers'