please help me with this error on console
router.map is not function
I am using browserify and laravel5.3
here is my app.js code :
import Vue from 'vue/dist/vue.js';
var VueRouter = require('vue-router');
import App from '../components/App.vue';
import Dashboard from '../components/Dashboard.vue';
import Home from '../components/Home.vue';
import Register from '../components/Register.vue';
import Signin from '../components/Signin.vue';
Vue.use(VueRouter);
export var router = new VueRouter()
router.map({
'/': {
name: 'home',
component: require('../components/Home.vue')
},
'/register': {
name: 'register',
component: Register
}
})
router.start(App, '#app');
vue-router 2.0, like Vue 2.0 has significant changes from v1.
In this specific case, routes are now declared differently:
new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
https://router.vuejs.org/en/essentials/getting-started.html
I strongly encourage you read up on what has changed in both.
Related
[new to Vue here]
I have seen a lot of similar questions, but no answers that would help me solve my error.
I am building a small Vue project and I am now trying to separate it into smaller components and views.
My router.js looks like this:
import Vue from 'vue'
import Router from 'vue-router'
import Jobs from './components/Jobs.vue'
import Companies from './components/Companies.vue'
import Events from './components/Events.vue'
Vue.use(Router)
export default new Router ({
routes: [
{
path: '/jobs',
name: 'jobs',
component: 'Jobs'
},
{
path: '/companies',
name: 'companies',
component: 'Companies'
},
{
path: '/events',
name: 'events',
component: 'Events'
}
]
})
And for the rest you can check out this repo, has very few files https://github.com/anaivanm/vue-tw/
This error is driving me nuts and I have no idea why it's not compiling.
./src/router.js
Module Error (from ./node_modules/eslint-loader/index.js):
error: 'Jobs' is defined but never used (no-unused-vars) at src/router.js:3:8:
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
> 3 | import Jobs from './components/Jobs.vue'
| ^
4 | import Companies from './components/Companies.vue'
5 | import Events from './components/Events.vue'
6 |
What am I missing?
There is no need to use single-quotes in component: 'Jobs' what you probably wanted to do is to use your component instead:
...
import Jobs from './components/Jobs.vue'
...
export default new Router ({
routes: [
{
path: '/jobs',
name: 'jobs',
component: Jobs
},
...
Make sure that you've configured Vue.Router exactly as explained on its official page.
Here is a quote from there:
// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
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 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: [...]
})
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'
I'm trying to build a vuejs application which will have hundreds if not thousands of "form" or "page" components that all get swapped out inside a dynamic <component is=''> tag. The problem is having to import each component. Is there a way to dynamically import components based on a route parameter? So far I have the following but it doesn't work:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const Hello = resolve => require(['#/components/Hello.vue'], resolve)
export default new Router({
routes: [{
path: '/',
name: 'Hello',
component: Hello
}, {
path: '/:name',
name: 'Dynamic',
component : {
template: '<component :is="$route.params.name"></component>',
watch: {
'$route': function(to) {
window[to.params.name] = resolve => require(['#/components/' + to.params.name + '.vue'], resolve)
Vue.component(to.params.name, window[to.params.name])
console.log(to.params.name)
}
}
}
}]
})
One way to do it, assuming all components are stored in a single directory (technically they can be stored anywhere as long as the loader file grabs and imports them).
import Vue from 'vue'
import Router from 'vue-router'
import Components from './components'
Vue.use(Router)
const Hello = resolve => require(['#/components/Hello.vue'], resolve)
export default new Router({
routes: [{
path: '/',
name: 'Hello',
component: Hello
}, {
path: '/:name',
name: 'Dynamic',
component : {
template: '<component :is="Components[$route.params.name]"></component>'
}
}]
})
Then inside ./components/index.js the following assuming all your components are .vue files:
const files = require.context('.', false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
modules[key.replace(/(\.\/|\.vue)/g, '')] = files(key)
})
export default modules
I haven't tested this implementation, but the approach to loading the directory files is how I use it in some areas where I have a dynamic number of components located in a folder that can change over time (say as more modules get installed into the application and you don't want to have to update the supportive frontend code every time).