Vue component can not get this.$router, but get this.$route in App component, what could be wrong?
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import store from './store'
import FeedView from './views/FeedView.vue'
import LoginView from './views/LoginView.vue'
Vue.use(VueRouter)
Vue.config.devtools = true
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: FeedView },
{ path: '/login', component: LoginView },
]
})
new Vue({
router,
store,
el: '#app',
render: h => h(App)
})
capture image of vue-devtools
It is clearly explained in vue-router docs: https://router.vuejs.org/en/api/route-object.html
The route object can be found in multiple places:
Inside components as this.$route
Inside $route watcher callbacks
As the return value of calling router.match(location)
If you want to use e.g. router.push(), based on your code, you definitely should be able to use this.$router.push()
Related
I'm having a hard time understanding how to implemente routes in vue.js using the official guide, is there a way to maybe streamline the process?
You can use Vue router library. Here, components is the folder where vue components are added. The variable "path" refers to the url route.
This is a sample router file I created.
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
component: () => import("#/components/Login"),
},
{
path: "/home",
name : "home",
component: () => import("#/components/Home"),
},
]
});
Please refer this document : https://v2.vuejs.org/v2/guide/routing.html
Also, import your router file into app initialisation.
import router from "./router";
new Vue({
router,
render: h => h(App)
}).$mount("#app");
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'
});
So I have a simple router file, that imports different routes for different parts of my website, so:
general.js (one of my route files)
import Home from '../../components/home/home'
const routes = [{
name: 'home',
path: '/',
component: Home
}]
export default routes
router.js
import Vue from 'vue'
import Router from 'vue-router'
import GeneralRoutes from './general'
Vue.use(Router)
const routes = Array.prototype.concat(
GeneralRoutes
)
const router = new Router({
mode: 'history',
routes
})
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
next({replace: true, name: 'login'})
}
next()
})
export default router
That is my router, now in my app.js, I simply use it like so:
import Vue from 'vue'
import Router from './core/routes/router'
new Vue({
el: '#app',
data: () => ({
user: ''
}),
Router,
});
But this is throwing an error saying the following:
[Vue warn]: Error in render: "TypeError: Cannot read property
'matched' of undefined"
When I console.log the router, I get the following:
router is lowercase
import Vue from 'vue'
import Router from './core/routes/router'
new Vue({
el: '#app',
data: () => ({
user: ''
}),
router: Router
});
I am trying to integrate vue-router in my app. In my admin.js, I have:
import Vue from 'vue'
import Router from 'vue-router'
import AdminHome from '../admin/home.vue'
import AdminMetroArea from '../admin/metro-area.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/metro-areas/', name: 'metro-areas', component: AdminMetroArea },
{ path: '/', component: AdminHome }
]
})
document.addEventListener('DOMContentLoaded', () => {
const admin_home = new Vue(AdminHome).$mount('#vue-admin-home');
})
and I call like:
<td>my metro: <router-link :to="{ name: 'metro-areas' }">{{metro_area.metro_area}}</router-link></td>
but I get the following error:
How do I configure my Vue app to pick up my router?
the Router needs to be supplied to Vue during initialization, explicitly:
new Vue({
router: Router
})
Where Router is your import Router from '...path'.
In Main.js file do the following thing:
import router from './router'
where './router' would be the path of your router file.
then,
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
},
data() {
return {}
}
})
Than, supply it to the Vue in the same file (Main.js). HAPPY CODING :)
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)
})