vue-router this.$route object is always empty with single file components - javascript

I am using single file components with vue-router and vue-2.0 and I am having an issue I can't seem to be able to resolve. The this.$route object called from a component always returns empty values.
e.g.
Messages.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Post List</div>
<div class="panel-body">
<li v-for="item in items">
{{ item.message }}
</li>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
created() {
console.log(this.$route);
},
mounted() {
console.log('Component mounted.')
},
data() {
return {
items: [
{message: 'Foo'},
{message: 'Bar'}
]
}
},
}
</script>
App.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Messages from './components/Messages';
Vue.use(VueRouter);
const routes = [
{ path: '/user/get/:id', component: Messages},
]
const router = new VueRouter({
routes
})
const app = new Vue({
router,
el: '#app',
components: { Messages }
});
Any help will be greatly appreciated.

You just need to tell Vue here to render the router views you can do this by modifying the Vue initialization by adding a template that holds the route-view directive.
const app = new Vue({
router,
el: '#app',
template: '<router-view/>',
components: { Messages }
})
That should make it work for you.

It is difficult to know what the problem is because you haven't included the HTML representing the template that the root component uses to render.
If your root component is rendering a router-view component then the route params should be available in the Messages component instance.
Here is an example using your setup: https://codepen.io/autumnwoodberry/pen/WEBEKd?editors=1010

Related

How do I use the render function correctly in Vue?

I'm just starting to use the render function and came across
with one problem.
When rendering, the Home component does not display app routes
registered in
App.vue
<template>
<div>
<h1>Vue Router Demo App</h1>
<p>
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'hello' }">Hello World</router-link>
</p>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {}
</script>
there are no errors in the browser console.
app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './App'
import Hello from './views/Hello'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
Home.vue
with this configuration, the routes are not displayed
<script>
export default {}
import Vue from 'vue'
new Vue({
el: '#app',
render(createElement) {
return createElement("div", { class: "container" }, [
createElement("p", { class: "my-class" }, "Some cool text")
])
}
});
</script>
I just want to use the render function inside my components. Or understand how to use the render function correctly for two or more vue components.
How to configure the app correctly with switching between components
Home and Hello?
The components in Vue should be inherited from vue components and injected in the base component.
Vue.component('home', {
render(createElement) {
return createElement("div", { class: "container" }, [
createElement("p", { class: "my-class" }, "Some cool text")
])
}
})
new Vue({
el: '#app',
components: ['home'],
template: '<home/>'
})
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>

How to extract Route Params via Props

I am learning VueJs and trying to understand how to extract route params via props.
I was looking at the following documentation, where it seems to have three options to have this done, but I cannot understand it quite well so far - https://github.com/vuejs/vue-router/tree/dev/examples/route-props.
I have tried adding props: true to my router object array (routes.js file posted below) with no success as well.
As this is vue-cli study project I will post the separate pertinent blocks of code in order to try to illustrate this properly.
Main - App.vue below:
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1>Routing</h1>
<hr>
<app-header></app-header>
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import Header from './components/Header.vue'
export default {
components: {
appHeader: Header
}
}
</script>
<style>
</style>
Component - Header.vue below:
<template>
<ul class="nav nav-pills">
<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
<router-link to="/user/10" tag="li" active-class="active"><a>User 1</a></router-link>
<router-link to="/user/5" tag="li" active-class="active"><a>User 2</a></router-link>
</ul>
</template>
Component - User.vue below:
<template>
<div>
<h1>The User Page</h1>
<hr>
<br>
<p>Route ID: {{id}}</p>
<button class="btn btn-primary" #click="goHome">Go to Home</button>
</div>
</template>
<script>
export default {
data(){
return {
id: this.$route.params.id
}
},
watch: {
'$route'(to, from) {
this.id = to.params.id;
}
},
methods: {
goHome(){
this.$router.push('/')
}
}
}
</script>
main.js below:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from "./routes";
Vue.use(VueRouter)
export const router = new VueRouter({
routes,
mode: 'history'
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
routes.js below (located at SRC folder):
import User from './components/user/User.vue'
import Home from './components/Home.vue'
export const routes = [
{path: '', component: Home},
{path: '/user/:id', component: User}
]
Do I need to also set Props at User.vue component as well in order to make it work and quit using watch?
In other words, I would like to see my user route being listened at <p>Route ID: {{id}}</p> from this hardcoded 10 to 5 using this new method which I cannot understand, mentioned at the top of this post.
Could anyone please walk me through this issue in this specific situation?
Thanks in advance to all.
According to the docs on passing Props to Route components, you can decouple it, with the props option on the router config.
import User from './components/user/User.vue'
import Home from './components/Home.vue'
export const routes = [
{path: '', component: Home},
{path: '/user/:id', component: User, props: true}
]
<template>
<div>
<h1>The User Page</h1>
<hr>
<br>
<p>Route ID: {{id}}</p>
<button class="btn btn-primary" #click="goHome">Go to Home</button>
</div>
</template>
<script>
export default {
props: ['id'],
methods: {
goHome() {
this.$router.push('/')
}
}
}
</script>

Not loading vue file in Laravel 5.7 application

working with laravel 5.7 and vue.js my
app.js file is as following,
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
{ path: '/dashboard', component: require('./components/Dashboard.vue') },
{ path: '/profile', component: require('./components/Profile.vue') }
]
const router = new VueRouter({
routes // short for `routes: routes`
})
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
router
});
and I need link following link with vue file
<router-link to="/dashboard" class="nav-link">
and Dashboard.vue file is like this
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Dashboard Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
but when I click above link to dashbord.vue file it is not loading. only display url in the address bar. my console error is as following
[Vue warn]: Failed to mount component: template or render function not defined. found in ---> <Anonymous> <Root>
how can fix this error
You need add App.vue
<template>
<div>
<router-link to="/dashboard" class="nav-link">Dashboard</router-link>
</div>
</template>
<script>
export default {
// some code here if needed
}
</script>
and then use it in main.js
require('./bootstrap'); // maybe better use import "./bootstrap"
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from "./App.vue";
import Dashboard from './components/Dashboard.vue';
import Profile from './components/Profile.vue';
import ExampleComponent from './components/ExampleComponent.vue';
Vue.use(VueRouter)
window.Vue = Vue; // why you do that???
let routes = [
{ path: '/dashboard', component: Dashboard },
{ path: '/profile', component: Profile }
]
const router = new VueRouter({
routes // short for `routes: routes`
});
Vue.component('example-component', ExampleComponent);
new Vue({
router,
render: (h) => h(App)
}).$mount('#app');

Template not being displayed on click on Vue link

I'm creating a Laravel website that will be a single page application. I'm new to VueJS even if I have experience with javascript in general.
I need to display several routes, such as /blog/new, /blog/:id, /blog/edit, etc. /blog itself is defined by Laravel, and works as the blog index.
I installed vue-router, and tried to follow some examples I saw but nothing happens:
app.js
import './bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
const blogIndex = { template: require('./components/blog/index.vue') };
const blogNew = { template: require('./components/blog/new.vue')};
const routes = [
{
path: '/blog',
component: blogIndex,
name: 'blog-index'
},
{
path: '/blog/new',
component: blogNew,
name: 'blog-new'
}
];
const router = new VueRouter({
routes,
mode: "history"
});
Vue.use(VueRouter);
Vue.component('example', require('./components/Example.vue'));
Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('blog_index', require('./components/blog/index.vue'));
console.log(testvar);
const app = new Vue({
router
}).$mount('#app');
components/blog/index.vue
<template>
<div>
<h1>Blog index</h1>
<router-link :to="{ name: 'blog-new' }">New article</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
mounted() {
console.log('blog#index mounted');
}
}
</script>
components/blog/new.vue
<template>
<h2>Here is blog/new y'all</h2>
</template>
<script>
export default {
mounted() {
console.log('blog#new mounted');
}
}
</script>
So far, the only thing that works is my address bar that gets modified, but the template itself doesn't seem to be loaded (I go from /blog to /blog/new).
I've seen that I need add <router-view></router-view> in my html file, but this triggers an error and blocks VueJS's display.
My question is: what am I missing, or what did I do wrong?
Thank you in advance
You need to use <router-view></router-view> in your main App.vue file, which is the part that new routes are loaded into.
<template>
<router-view></router-view>
</template>
You currently state you have this in components/blog/index.vue - which I believe is just for your nested routes. https://router.vuejs.org/en/essentials/nested-routes.html

Vue.js doesn't render components

I am using Vue.js and I want to try to render components but it isn't working
main.js:
import Vue from 'vue';
import 'bulma';
import Navbar from './Navbar.vue';
Vue.component('navbar', Navbar);
const MyC = Vue.component('myc', {
template: '<h1>Are you working?</h1>',
});
const root = new Vue({
el: '#app',
components: {
Navbar, MyC,
},
});
index.html
<body>
<div id="app">
<navbar></navbar>
<myc></myc>
</div>
<script src="dist/build.js"></script> <!-- Webpack endpoint -->
</body>
Navbar.vue
<template>
<h1>HELLO FROM NAVBAR</h1>
</template>
<script>
// Some logic here
export default {
name: 'navbar',
};
</script>
I coded as written in guide but neither of the ways to render a component is working
I just have blank page
I am using webpack+vue-loader
[UPDATE]
It works without components imports just rendering template
[UPDATE 2]
Got this message
[Vue warn]: Unknown custom element: <navbar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
move your code from index.html to app.vue, index.html is a html file but not a vue file
try it , now it will be work , happy life.
//main.js
import Vue from 'vue'
import App from './App'
Vue.component('myc', { //gobal components
template: '<h1>Are you working?</h1>',
})
new Vue({
el: '#app',
template: '<App><App/>',
components: {
App
}
})
//index.html
<body>
<div id="app">
</div>
<script src="dist/build.js"></script>
</body>
//app.js
<template>
<div class="app">
<navbar></navbar>
<myc></myc>
<div
</template>
<script>
import navbar from 'path of Navbar.vue' //local components
export default {
name: 'app',
component:{
navbar
}
}
</script>
I've moved everything to App.vue
render: h => h(App) worked for me

Categories