I am a beginner in Vue (a few hours) and I have trouble switching to the next view after pressing the button.
login: function () - In strict mode code, functions can only be declared at top level or inside a block. (10: 9)
Can anyone tell me why this is happening?
Login.vue
<template>
<div>
<button v-on:click="login">
</button>
</div>
</template>
<script>
methods: {
login: function () {
this.$router.push('/home')
}
}
</script>
rouetr.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '#/components/Home.vue';
import Login from '#/components/Login.vue'
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/login',
name: 'Login',
component: Login
},
];
const router = new VueRouter({
routes,
});
export default router;
I think that it's a linter error, try to declare your function like this:
<script>
methods: {
login () {
this.$router.push('/home')
}
}
</script>
I chcange this and it wokrs
<script>
export default {
name:"App",
methods: {
next() {
this.$router.push({ name: 'Home' })
console.log(this)
}
}
}
</script>
Related
I am new to Vue and am trying to load in json data from a REST API called JSON placeholder. I get the error:
"Uncaught ReferenceError: Prijzen is not defined
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/layout/Prijzen.vue?vue&type=script&lang=js&:16)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/layout/Prijzen.vue?"
So after i got this i tried looking at index.js but prijzen is added there.. the code looks like this:
import Vue from 'vue'
import Router from 'vue-router'
// Containers
const TheContainer = () => import('#/containers/TheContainer')
// Views
const Dashboard = () => import('#/views/Dashboard')
const Prijzen = () => import('#/views/layout/Prijzen')
const Login = () => import('#/views/layout/Login')
Vue.use(Router)
export default new Router({
mode: 'hash', // https://router.vuejs.org/api/#mode
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/',
redirect: '/dashboard',
name: 'Home',
component: TheContainer,
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: Dashboard
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/layout/prijzen',
name: 'Prijzen',
component: Prijzen
}
]
},
]
})
So prijzen is fine here. At least it looks fine to me. This is how the prijzen component looks:
<template>
<div id="Prijzen">
{{ prijs }}
</div>
</template>
<script>
import axios from 'axios';
import PrijsItem from './PrijsItem.vue';
export default {
name: 'Prijzen',
components: {
PrijsItem
},
props: ["PrijsItem"]
}
</script>
I have used {{ prijs }} in the template and in my main.js file it is being mentioned with my axios get request as you can see here:
import 'core-js/stable'
import Vue from 'vue'
import CoreuiVue from '#coreui/vue/src'
import App from './App'
import router from './router/index'
import { iconsSet as icons } from './assets/icons/icons.js'
import store from './store'
Vue.use(CoreuiVue)
new Vue({
el: '#app',
router,
store,
//CIcon component documentation: https://coreui.io/vue/docs/components/icon
icons,
template: '<App/>',
components: {
App,
Prijzen
},
new:({
let: '#Prijzen',
data () {
return {
prijs: null
}
},
mounted () {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then(response => (this.prijs = response))
}
})
})
Is the Prijzen.vue file definitely in the views/layout directory? That error looks like it might be caused by not being able to find the file where you've told it to look.
A different issue:
{{ prijs }}
Is in the template, but prijs is not defined. Also PrijsItem component has been imported but not used which will sometimes throw linting errors.
I am trying to guard home page and route user to login page if he/she is not signed in.
To do that I made I made router object so that I can use beforeEach() function.
But I get this error:
This error occurs after I try to make a constant object of router.
router.js is:
import Vue from 'vue';
import Router from 'vue-router';
import firebase from 'firebase';
import Home from './views/Home.vue';
import Signup from './components/auth/Signup.vue';
import Login from './components/auth/Login';
Vue.use(Router);
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
requiresAuth: true,
},
},
{
path: '/signup',
name: 'Signup',
component: Signup,
},
{
path: '/login',
name: 'Login',
component: Login,
},
],
});
// router guards
router.beforeEach((to, from, next) => {
// check to see if routh require auth
if (to.matched.some(rec => rec.meta.requiresAuth)) {
// check state of user
const user = firebase.auth().currentUser;
if (user) {
next();
} else {
next({ name: 'Login' });
}
} else {
next();
}
});
This is is in main.js file.
import Vue from 'vue';
import firebase from 'firebase';
import router from './router';
import App from './App.vue';
Vue.config.productionTip = false;
const app = null;
// Wait for firebase init the user
firebase.auth().onAuthStateChanged(() => {
// init the app if not created
if (!app) {
new Vue({
router,
render: h => h(App),
}).$mount('#app');
}
});
Add the below changes
Add this line to last in router.js
export default router;
Add In main.js
import router from './router'; (path should point to your router.js)
new Vue({
router,
....
....
})
I am facing problems with the Vue Router and I have no idea what is causing this...
When my application loads it inserts the page path twice.
Example:
If I access the path http://localhost:8080/painel it will be shown in the browser the following path: http://localhost:8080/painel/painel
If I refresh the page the path will be added one more time, going like this: http://localhost:8080/painel/painel/painel
MY files:
/src/main.js
import Vue from 'vue'
import localforage from 'localforage'
import Notifications from 'vue-notification'
import App from './App'
import store from './store'
import router from './router'
import bus from './support/bus'
import http from './support/http'
Vue.config.productionTip = true
window._ = require('lodash')
localforage.config({
driver: localforage.LOCALSTORAGE,
storeName: 'invenio-center'
})
store.dispatch('auth/setToken').then(() => {
store.dispatch('auth/fetchSystemData').catch(() => {
store.dispatch('auth/clearAuth')
})
}).catch(() => {
store.dispatch('auth/clearAuth')
})
Vue.use(Notifications)
Vue.use(bus)
Vue.use(http)
new Vue({
el: '#app',
router,
store,
components: {App},
template: '<App/>'
})
/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import Login from '../pages/Login'
import Panel from '../pages/Panel'
import PanelIndex from '../pages/panel/Index'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'login',
component: Login,
meta: {
visitor: true
}
},
{
path: 'painel',
component: Panel,
meta: {
auth: true
},
children: [
{
path: '/',
name: 'panel.index',
component: PanelIndex
},
{
path: 'idr',
name: 'panel.idr',
component: PanelIndex
}
]
},
{
path: "*",
redirect: {
name: 'panel.index'
},
component: PanelIndex
}
]
})
router.beforeEach(
(to, from, next) => {
store.dispatch('auth/setToken').then(() => {
if(to.meta.visitor){
next({
name: 'panel.index'
});
return;
}
next();
}).catch(() => {
if(to.meta.auth){
next({
name: 'login'
});
return;
}
next();
})
}
)
export default router
/src/pages/Panel.vue
<template>
<div class="panel-container">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Panel',
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.panel-container {
}
</style>
/src/pages/panel/Index.vue
<template>
<div class="index-container">index</div>
</template>
<script>
export default {
name: 'PanelIndex',
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.index-container {
}
</style>
try this, add / before path: '/painel', and do that for other components.
/ is used to distinct from relative path.
I load all of my data in the root Vue instance and im trying to access them in my router.
How can I access the data in my root instance within my router? All the this.a.app or this.app answers i found online weren’t the solution.
Router.js:
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/login'
import Container from '../components/container'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [{
path: '/login',
name: 'Login',
component: Login,
props: { test: **<data from my Vue root instance>** }
},
{
path: '/products',
name: 'Container',
component: Container,
children: [{
path: 'flavor',
component: Login
},
{
path: 'storage',
component: Login
},
{
path: 'network',
component: Login
}
]
}
]
})
Main.js:
import router from './router’
var vm = new Vue({
el: ‘#app’,
router,
template: ‘’,
components: {
App
},
data() {
return {
modal: ‘’
I would avoid sharing the data using the router instance.
I personally like to have a store file, which contains data I want to share between my components.
export default {
state: {
counter: 0
}
}
And in your component you can import the file:
import store from '../store'
export default {
data () {
return {
sharedState: store.state
}
}
}
Changes to sharedState will also be passed to other components.
Source: https://skyronic.com/2016/01/03/vuex-basics-tutorial / Solution 2
I try use vue-router, but something went wrong.
On page rendered router-link, by click url changed. localhost/#/ -> localhost/#/contacts but component steal main page. Update only if page reload.
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './index.vue';
import Error404 from './404.vue';
import Routes from './route';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
routes: Routes
});
window.onload = () => {
new Vue({
router: router,
el: '#app-container',
data: {
currentRoute: window.location.hash.split('#')[1]
},
computed: {
ViewComponent () {
return Routes.filter(item => item.path == this.currentRoute)[0] || Error404
}
},
render (h) { return h(this.ViewComponent.component ? this.ViewComponent.component : this.ViewComponent) }
});
}
route.js
const routes = [
{path: '/', component: mainPage},
{path: '/example1', component: examplePage},
{path: '/example2', component: exampleForm},
{path: '/contacts', component: contacts}
];
export default routes
index.vue
<template lang="jade">
div(id="app")
router-link(to="/example1") Example1
br
router-link(to="/example2") Example2
br
router-link(to="/contacts") Contacts
</template>
<script type="text/javascript">
export default {
}
</script>
I fix problem by add
watch: {
'$route'(to, from) {
this.$router.go(this.$router.currentRoute)
}
}
for main.js, but i think this is very bad solution.
you are missing router-view. this is the component responsible to render the component that the router needs to display
please consider this code structure based on official boilerplate:
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
index.vue
<template>
<div id="app">
<router-view/>
<router-link to="example1">example1</router-link>
<router-link to="example2">example2</router-link>
</div>
</template>
index.js (like your route.js)
import Vue from 'vue'
import Router from 'vue-router'
import example1 from '#/components/example.vue'
import example2 from '#/components/example2.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/example-1',
name: 'example-1',
component: example1
}
{
path: '/example-2',
name: 'example-2',
component: example2
}
]
})