import { createRouter, createWebHistory } from 'vue-router';
import about from './views/web/AboutPage.vue';
import support from './views/web/SupportPage.vue';
import iatiStanderd from './views/web/IatiStandard.vue';
import publishingChecklist from './views/web/PublishingChecklist.vue';
import { def } from '#vue/shared';
const routes = [
{
path: '/iati-standard',
name: 'iatiStanderd',
component: iatiStanderd,
},
{
path: '/support',
name: 'Support',
component: support,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
I have set up routes like this.
app.use(router);
and registered like thi in app.ts file
<router-link to="/iati-standard">IATI STANDARD</router-link>
and tried to use route like this.
the url changes but desired component is not rendered. where did i go wrong?
I am using vue with laravel
you should use the name instead of the URL.
In your case:
<router-link :to="{ name: 'iatiStanderd'}"> ... </router-link>
And btw, take care for the name it is iatiStandard not iatiStanderd 🙂
Related
The link would be like this: https://server/fleet/20210705001. How can I display this page when someone enters this link in address bar from anywhere. No authentication, no security, just the page needs to be opened. I have this working in local but couldn't make it work in production. Can someone help me?
This is my index.js in router folder
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Fleet from '../views/Fleet.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/feedback/:id',
name: 'Fleet',
component: Fleet,
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
next();
});
export default router
And this is my main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//import './axios-settings'
//Vue.config.productionTip = true;
createApp(App).use(router).mount('#app')
Can someone guide me?
router.beforeEach((to, from, next) => {next({ name: 'Fleet' });});
Im trying to create routing using vue-router , but I'm getting this error in vscode console:
HarmonyLinkingError: export 'onUnmounted' (imported as 'onUnmounted')
was not found in 'vue' (possible exports: default)" -t "Laravel Mix"
This is my app.js file:
import Vue from "vue";
import router from "./Router";
require("./bootstrap");
Vue.use(router);
Vue.component("home-component", require("./components/HomeComponent.vue"));
Vue.component("admin-component", require("./components/AdminComponent.vue"));
const home = new Vue({
el: "#home"
});
const admin = new Vue({
el: "#admin"
});
Whenever I open it in the browser the page is blank, and the browser console gives me this error:
Uncaught TypeError: (0 ,
vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function
at Module../node_modules/vue-router/dist/vue-router.esm-bundler.js
And this is my router file, located in Router/indexjs :
import { createWebHistory, createRouter } from "vue-router";
import Dashboard from "../components/Admin/DashboardComponent.vue";
import Professeur from "../components/Admin/ProfesseurCompenet..vue";
const routes = [
{
path: "/admin",
name: "Dashboard",
component: Dashboard
},
{
path: "/admin/prof",
name: "Professeur",
component: Professeur
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
Just change few things on the router file as below
instead of importing: import { createWebHistory, createRouter } from "vue-router";
// just do this:
import Vue from 'vue'; //import again even though you already imported it
import Router from 'vue-router'; // and this is where difference comes in
import Dashboard from "../components/Admin/DashboardComponent.vue";
import Professeur from "../components/Admin/ProfesseurCompenet..vue";
Vue.use(Router);
const routes = [
{
path: "/admin",
name: "Dashboard",
component: Dashboard
},
{
path: "/admin/prof",
name: "Professeur",
component: Professeur
}
];
//then you're router to export as follows
const router = new Router({routes : routes});
export default router
I am using Laravel 8 Vuejs 2.17 and VueRouter 3.4,
i have two components Orders.vue and Users.vue
this is how my app.js looks like
require("./bootstrap");
window.Vue = require("vue");
import Vue from "vue";
//? Vue router
import VueRouter from "vue-router";
import routes from "./routes";
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
router,
}).$mount("#app");
and here is how router.js looks like
import Orders from './appComponents/Orders';
import Users from './appComponents/Users';
const routes = [
{
path: "/admin/orders",
name: 'orders',
component: Orders,
},
{
path: "/admin/users",
name: 'users',
component: Users,
},
];
export default routes;
i called the routes in my laravel view like :
<router-link :to="{ name: 'users' }">users</router-link>
<router-link :to="{ name: 'orders' }">Orders</router-link>
the browser response with
[vue-router] Route with name 'users' does not exist
[vue-router] Route with name 'orders' does not exist
i also tried to call the routes by its path but still not working, anyone please can help me.
i found the solution, i've installed a an npm modules, and there was a conflict between the module app.js and my app.js
In a Laravel+Vue project i trying to use axios to get a API response. Axios call a Laravel endpoint and get controller response.
The code looks
JS
require("./bootstrap");
import Swal from "sweetalert2";
import VueI18n from "vue-i18n";
import VueRouter from "vue-router";
import axios from "axios";
import Vuetify from "vuetify";
import es from "vuetify/es5/locale/es";
import en from "vuetify/es5/locale/en";
import "#mdi/font/css/materialdesignicons.css";
import ContadoresComponent from "./components/ContadorComponent.vue";
import GatewaysComponent from "./components/GatewayComponent.vue";
import MainComponent from "./components/MainComponent.vue";
const routes = [{
path: "/",
name: "principal",
component: MainComponent
},
{
path: "/contadores",
name: "contadores",
component: ContadoresComponent
},
{
path: "/gateways",
name: "gateways",
component: GatewaysComponent
}
];
window.Vue = require("vue");
Vue.use(Vuetify);
Vue.use(VueRouter);
Vue.use(VueI18n);
Vue.use(axios);
Vue.component(
"drawer-component",
require("./components/DrawerComponent.vue").default
/* methods: {
changeLocale (lang) {
this.$vuetify.lang.current = lang
},
},*/
);
Vue.component(
"table-component",
require("./components/TableComponent.vue").default
);
export default new Vuetify({
icons: {
iconfont: "mdi"
},
lang: {
locales: {
es,
en
},
current: "es"
}
});
const router = new VueRouter({
routes
});
new Vue({
vuetify: new Vuetify(),
router
}).$mount("#app");
Vue (Vuetify)
<template>
<v-container class="fill-height" fluid>
<v-row align="center" justify="center">
<v-card class="mx-auto">
<v-list-item>
<v-list-item-content>
<v-list-item-title class="headline">Contador</v-list-item-title>
</v-list-item-content>
</v-list-item>
<table-component></table-component>
</v-card>
</v-row>
</v-container>
</template>
<script>
axios.get("/contadores").then(response => console.log(response));
</script>
The error: Return axios is not defined, but i think that i defined in App.js file.
Anybody see the error?
You still need to import it in the second file. You scrip tag should look like this:
<script>
import axios from 'axios';
axios.get("/contadores").then(response => console.log(response));
</script>
You have not imported axios in your file.
To solve this issue either import it in your file where you want to use it as below
import axios from 'axios';
OR
If you don't want to import it in each component where you use it, you can add it to the Vue prototype:
window.axios = require('axios');
//... configure axios...
Vue.prototype.$http = window.axios;
Then in any component you can use
this.$http.post('event/store', {
'name': this.name,
})
An interesting approach that I use in my projects, is to use the library vue-axios, which is very simple to be installed. In case you need to install the dependencies in your project through the commands npm install --save axios vue-axios and then import it into the main.js file or the main file of your application:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Â
Vue.use (VueAxios, axios)
The use of axios in the component will be through this.axios.get(`${url}`). Another approach already exposed by friends here at StackOverflow is to import the axios directly into the component you want to use:
<template>
<div>
...
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'ComponentName',
  methods: {
     async getAsyncApi() {
try {
        const result = await axios.get(`${url}`);
} catch(e) {
window.console.error('Error! ', e.message);
}
     },
     getApi() {
        let result;
axios.get(`${url}`).then((r) => {
result = r;
}).catch(e => window.console.error('Error! ', e.message));
     },
  },
};
</script>
I fix the error with
export default {
mounted() {
axios
.get("ENDPOINT")
.then(response => console.log(response));
}
};
I am trying to make a vue SPA using vuex, vue-router & laravel for backend. I was separating our data on our app.js to try to reduce clutter and keep our code neat. When everything on one page it works as intended, loading the routes in the router. But when we separate the code to make it more modular into: app.js, boostrap.js, routes.js, and store.js
The components aren't loading in our router-view and we are able to see our RouterLink
app.js
// Require the bootstrapper
require('./bootstrap');
// Grab imports
import Store from './store';
import Router from './routes';
// Views
import App from './views/App';
// Create the application
const app = new Vue({
el: '#heroic',
components: { App },
store: Store,
router: Router
});
boostrap.js
// Imports
import Vue from 'vue';
import Axios from 'axios';
import Swal from 'sweetalert2';
// Add to window
window.Vue = Vue;
window.Axios = Axios;
// Add Axios headers
window.Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.Axios.defaults.headers.common['Authorization'] = 'Bearer ' + 'token';
window.Axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
routes.js
// Imports
import Vue from 'vue';
import VueRouter from 'vue-router';
import Store from './store';
// Set to use
Vue.use(VueRouter);
// Views
import Hello from './views/Hello';
import Home from './views/Home/';
import UserIndex from './views/UserIndex';
// Create our routes
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
{
path: '/users',
name: 'users.index',
component: UserIndex,
}
];
// Create the router
const router = new VueRouter({
mode: 'history',
routes: routes,
scrollBehavior (to, from, saved) {
if (saved) {
return saved;
}
return { x: 0, y: 0};
}
});
// Before every request
router.beforeEach((to, from, next) => {
});
// After every request
router.afterEach((to, from, next) => {
});
// Export
export default router;
hello.vue
<template>
<div class="row row-cards row-deck">
<div class="col-lg-4 col-md-6">
<p>Hello World!</p>
</div>
</div>
</template>
store.js
// Imports
import Vue from 'vue';
import Vuex from 'vuex';
import PersistedState from 'vuex-persistedstate';
import Cookie from 'js-cookie';
// Set use
Vue.use(Vuex);
// Create our store
const store = new Vuex.Store({
state: {
auth: [{
id: 1,
username: '',
motto: '',
rank: 1,
permissions: [],
token: ''
}],
users: [],
},
mutations:{
},
actions: {
},
getters: {
}
});
// Export
export default store;
The expected result is that when I visit the "/hello" route it would show the information that says "Hello world!" that is within the Vue file specified as the component in the routes section of the router. Instead using my Vue DevTools I get the following with no Hello world on the page.
https://i.pathetic.site/chrome_99Mbxf7f0c.png
My guess is the router is stuck waiting for the beforeEach (and also possibly afterEach) hook to be resolved. You need to call next().
Also unrelated, but if you’re using modules then you shouldn’t need to assign stuff on window.