Got this working with a single page. It's when I introduce vue-router that nothing will render.
In main.js, if I return app.js with sample text and few edits; it renders fine with no issues. Seems it has to do with how I'm instantiating vue-router. Also, no console errors in my environment.
main.js
define(function(require) {
'use strict';
var Vue = require('vue');
var VueRouter = require('vue-router');
var App = require('app');
var Foo = { template: '<div>oijsdfoijsdoifjdsf</div>' }
var Bar = { template: '<div>bar</div>' }
Vue.use(VueRouter);
var routes = [
{ path: '/aaa', component: Foo },
{ path: '/bbb', component: Bar }
]
var router = new VueRouter({
routes: routes
});
return new Vue({
el: '#vue',
router: router,
render: function(h) {
h(App);
}
});
});
app.js
define(function(require) {
'use strict';
var Vue = require('vue');
return new Vue({
template: '<div id="vue"><router-view></router-view></div>'
});
});
From my experience, you can change your router configuration to:
const router = new VueRouter({
base: __dirname, // or '/'
routes: routes
})
You haven't defined a root route, e.g. /. So you wouldn't see any component render at /. Can you navigate to /aaa and see something? Also, shouldn't those route components be passed to Vue.component?
Related
I have made routes, if click on link in website it works as it should. But when you on that page (for example /aboutUs) and refresh it or simply copy url, paste it and hit Enter it shows Page not found. How to fix it? Run out of ideas, can't find answer that works anywhere
main.js below:
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.prototype.$careerEmpty = false;
const router = new VueRouter({
mode:'history',
scrollBehavior(to, from, savedPosition){
if (to.hash) {
return { selector: to.hash}
} else if (savedPosition) {
return savedPosition;
} else {
return {x:0, y:0}
}
},
routes
});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
routes.js below:
import firstPage from "#/components/Pages/firstPage";
import aboutUsPage from "#/components/Pages/aboutUsPage";
import pageNotFound from "#/components/pageNotFound";
const routes = [
{path: '/', component: firstPage},
{path: '/aboutUs', component: aboutUsPage},
{path: '/404', component: pageNotFound},
{path: '*', redirect: '/404'},
];
export default routes;
You can use vue router history mode.
Check here
Vue.use(Router, {
mode: 'history'
});
I have this vue js script
const NotfoundComponent = {
template: '<h1>Not found</h1>'
};
const HomeComponent = {
template: '<h1>Home</h1>'
};
const AboutComponent = {
template: '<h1>About</h1>'
};
const routes = [
{
path: '/',
component: HomeComponent
},
{
path: '/about',
component: AboutComponent
},
{
path: '*',
component: NotfoundComponent
}
];
const router = new VueRouter({
mode: 'history',
routes
});
new Vue({
el: '#app',
router
});
that uses vue-router. I am running vue js inside a jsp page inside a spring mvc app. I would like to have load the jsp page normally as served by jetty and only use vue js router to navigate between components inside the page.
I have the router setup and working inside the page, however on link click, i do not want any of this vue js links
<div id="app">
<router-link to="/">home</router-link>
<router-link to="/about">about</router-link>
<router-link to="/something">no route</router-link>
<router-view></router-view>
</div>
to modify the current address bar or append anything new to it.
Can that be done using vue js?.
You want 'abstract' mode.
const router = new VueRouter({
mode: 'abstract',
routes
});
This requires you push an initial URL:
// you main Vue instance
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
mounted() {
this.$router.replace('/') // added this
}
})
CodeSandbox demo here.
Please Check below link, you want to use abstract
https://jsfiddle.net/qpnaokhf/
const router = new VueRouter({
routes,
mode: 'abstract'
})
I'm just getting started with Vue, so please forgive the potentially silly question. I'm trying to avoid using NPM.
I have a component defined (tested and working outside of routing so I've omitted the template):
var TaxonomyComponent = Vue.component('taxonomy', {
template: '#taxonomy-component',
data: function(){
return {
taxa: {
results: [],
count: 0
},
page: 1,
page_size: 25,
loading: true
};
},
mounted(){
this.getData();
},
methods:{
getData: function(){
var self = this;
self.loading = false;
self.taxa = goGetDataElsewhere();
}
},
computed: {
max_page: function(){
return Math.ceil(this.taxa.count / this.page_size);
}
},
watch:{
page: function(){
this.loading = true;
this.getData();
}
}
});
I then define my routes, router, and app:
var routes = [
{path:'/', component: TaxonomyComponent},
];
const router = new VueRouter({
routes: routes
});
const app = new Vue({
router
}).$mount('#app');
I go to / (confirmed by Vue debug tools) and nothing is loaded.
I make this mistake myself all the time when first setting up the Vue router; in order for a route to render, you need to include a <router-view /> component in your template. That is the placeholder where the components defined in your route will be rendered.
It can also be used to pass props to the components from the component containing the <router-view /> or catch events sent from your route components.
I'm getting the following error when trying to implement vue-router.
Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Where do I need to provide the name option?
A lot of the tutorials I'm looking at seem to be an older version of vue-router. I follow the set-up process but can't get it to work.
Might there be something special I have to do when using the webpack cli template?
I'm also using the vue-router cdn.
Here's my main.js
import Vue from 'vue'
import App from './App'
import ResourceInfo from '../src/components/ResourceInfo'
var db = firebase.database();
var auth = firebase.auth();
const routes = [
{ path: '/', component: App },
{ path: '/info', component: ResourceInfo }
]
const router = new VueRouter({
routes
})
/* eslint-disable no-new */
var vm = new Vue({
el: '#app',
components: { App },
created: function() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// Get info for currently signed in user.
console.log(user);
vm.currentUser = user;
console.log(vm.currentUser);
} else {
// No user is signed in.
}
})
// Import firebase data
var quizzesRef = db.ref('quizzes');
quizzesRef.on('value', function(snapshot) {
vm.quizzes = snapshot.val();
console.log(vm.quizzes);
})
var resourcesRef = db.ref('resources');
resourcesRef.on('value', function(snapshot) {
vm.resources.push(snapshot.val());
console.log(vm.resources);
})
var usersRef = db.ref('users');
usersRef.on('value', function(snapshot) {
vm.users = snapshot.val();
console.log(vm.users);
})
},
firebase: {
quizzes: {
source: db.ref('quizzes'),
asObject: true
},
users: {
source: db.ref('users'),
asObject: true
},
resources: db.ref('resources')
},
data: function() {
return {
users: {},
currentUser: {},
quizzes: {},
resources: []
}
},
router,
render: h => h(App)
})
And my App.vue
<template>
<div id="app">
<navbar></navbar>
<resource-info :current-user="currentUser"></resource-info>
<router-view></router-view>
</div>
</template>
<script>
import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'
export default {
name: 'app',
props: ['current-user'],
components: {
Navbar,
ResourceInfo
}
}
</script>
<style>
</style>
In your main.js file, you need to import VueRouter as follows:
import Vue from "vue" // you are doing this already
import VueRouter from "vue-router" // this needs to be done
And below that, you need to initialize the router module as follows:
// Initialize router module
Vue.use(VueRouter)
Other than the above, I cannot find anything else missing in your code, it seems fine to me.
Please refer to the installation page in docs, under NPM section:
http://router.vuejs.org/en/installation.html
First install vue router by using "npm install vue-route" and follow the bellow in main.js
import Vue from 'vue'
import Router from 'vue-router'
import App from './App'
import ResourceInfo from '../src/components/ResourceInfo'
var db = firebase.database();
var auth = firebase.auth();
Vue.use(Router)
var router = new Router({
hashbang: false,
history: true,
linkActiveClass: 'active',
mode: 'html5'
})
router.map({
'/': {
name: 'app',
component: App
},
'/info': {
name: 'resourceInfo',
component: ResourceInfo
}
})
// If no route is matched redirect home
router.redirect({
'*': '/'
});
// Start up our app
router.start(App, '#app')
This might be solve your problem
You forgot to import vue-router and initialize VueRouter in main.js
import VueRouter from "vue-router"
Vue.use(VueRouter)
I'm using Vue with vue-router and vue-strap. I'm trying to register components from vue-strap, but the examples look like this:
var alert = require('vue-strap').alert;
new Vue({
components: {
alert: alert
}
})
vue-router, on the other hand, doesn't create a Vue object.
Vue.use(VueRouter);
const router = new VueRouter({
history: true,
linkActiveClass : 'active'
});
router.map({
'/': {
component: Home
}
});
const App = Vue.extend(Index);
router.start(App, '#root');
So how do I declare my components?
This is my current setup in vue apps
var Vue = require('vue');
var VueRouter = require('vue-router');
// Use
Vue.use(require('vue-resource'));
Vue.use(VueRouter);
// Components
var site = Vue.component('site', require('./views/site/component.vue'));
var home = Vue.component('home', require('./views/home/component.vue'));
var search = Vue.component('search', require('./views/search/component.vue'));
var index = Vue.component('index', require('./views/index/component.vue'));
// Router
var router = new VueRouter({
history: true
});
router.map({
'/': {
component: index
},
'/search': {
component: search
},
'/profile': {
component: home
}
})
// Start App
router.start(site, 'body');
All 'major' components are declared globally with .component. Everything that I need at component level I declare with .extend. In vue-router, the 'site' component (in my case) acts as the $root.
Topmenu / sidebar are declared in the site component in the components section.
In the 'site' template i have only and other shared components like topmenu / sidebar.
you can try it instead,
import { alert } from 'vue-strap'
Vue.use(VueRouter);
const router = new VueRouter({
history: true,
linkActiveClass : 'active'
});
router.map({
'/': {
component: alert
}
});
const App = Vue.extend(Index);
router.start(App, '#root');