[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 }
]
Related
I create done vue js app. In which i have main index.js file for routes and i made different route file for other view and all my child file extend in main index.js route file.
index.js (Main route file)
Below I import my child routes in this file
import test1 from './test1'
import test from './test'
My child route file test1
export default [{
path: '/roles',
component: Layout2,
children: [{
path: '/',
component: () => import('#/views/test/test1'),
meta: {
auth: true
},
beforeEnter(to, from, next) {
if(checkPermission("readUser")){
router.push({
name: 'unauthorized'
})
}
}
}
}]
}]
Now issue is i am trying push unauthorized in url by using before route, but it gives me error like router is not defined. How can i solve this issue?
I think you should creater router instance first, and export it.
export const router = new VueRouter(routes)
const routes = {
path: '/roles',
component: Layout2,
... etc.
}
Then import router into main js file.
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'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).
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.