<script setup>
import { useRouter } from 'vue-router'
const menus = useRouter();
console.log(menus);
</script>
it's not return the routers , but return an obejct like this:
So what I can do to fix that?
I'm usually like this, without using {}
import VueRouter from "vue-router";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
Related
I'm currently using VueJS in browser mode, without build tools, using scripts in the header of my page:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
and then in the body:
<script>
var router = new VueRouter({
mode: 'history',
routes: []
});
var app = new Vue({
el: "#graphe_app",
router,
[...]
});
</script>
I'd like to use the vue-gtap component using the following script in my header but without build tools:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-gtag#2.0.1/dist/vue-gtag.umd.min.js"></script>
I read the tutorial for vue-gtag but it only explains how to use the component with build tools:
import { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import VueGtag from "vue-gtag";
import App from "./App.vue";
import Home from "./Home.vue";
import About from "./About.vue";
const router = new VueRouter({
history: createWebHashHistory(),
routes: [
{ name: 'Home', path: '/', component: Home },
{ name: 'About', path: '/about', component: About },
]
});
const app = createApp(App);
app.use(router);
app.use(VueGtag, {
config: {
id: "GA_MEASUREMENT_ID",
},
}, router); // <----- add your router here
app.mount("#app");
Do you know how I can adapt the above code without build tools to automatically track page changes with router and send them to GA?
Thanks a lot for your help!
Alex
I'm using vue router in a project and I noticed that when I used the redirect property it redirected me to the same website.
for example if I have
import {
createRouter,
createWebHistory
} from "vue-router";
import Home from "#/views/Home.vue";
import Commands from "#/views/Commands.vue";
const routes = [{
{
path: "/google",
redirect: "https://www.google.com",
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
it will redirect me to domain.com/https://www.google.com
instead of straightly going to https://www.google.com
is there a way to prevent that?
The following fixed OP's issue.
const routes = [{
{
path: "/google",
beforeEnter: () => {
window.location.href = 'http://www.google.com'
},
},
];
Using navigation guards.
I’m using vue-router version "^4.0.13". when I want to run (npm run watch) the following errors occur
WARNING in ./resources/js/app.js 7:8-17 export 'default' (imported as
'VueRouter') was not found in 'vue-router'
My project files are
app.js
require("./bootstrap");
window.Vue = require("vue").default;
import Vue from "vue";
import VueRouter from "vue-router";
import { routes } from "./routes";
Vue.use(VueRouter);
Vue.component(
"employees-index",
require("./components/employees/Index.vue").default
);
const router = new VueRouter({
mode: "history",
routes: routes
});
const app = new Vue({
el: "#app",
router: router
});
routs.js
import EmployeesIndex from "./components/employees/Index";
import EmployeesCreate from "./components/employees/Create";
import EmployeesEdit from "./components/employees/Edit";
export const routes = [
{
path: "/employees",
name: "EmployeesIndex",
component: EmployeesIndex
},
{
path: "/employees/create",
name: "EmployeesCreate",
component: EmployeesCreate
},
{
path: "/employees/:id",
name: "EmployeesEdit",
component: EmployeesEdit
}
];
I have already tried the suggestions stated regarding the hashbang (/#/) with Vue and Laravel, and it seems it still doesn't work for me.
routes.js
let routes = [
{
path: '/',
component: Home,
children: [
{
path: '/blog',
component: PageBlogLists,
},
{
path: '/post/:page_id',
component: PageBlog
}
]
},
];
export default new VueRouter({
// This does not work
mode: 'history',
routes
});
app.js
// Vue Router
import VueRouter from 'vue-router';
import router from './router/routes';
require('./bootstrap');
window.Vue = require('vue');
Vue.use(VueRouter);
const app = new Vue({
el: '#app',
router
});
Has anyone successfully tried removing it?
I'm trying to use vue-router to link url's to their corresponding components.
My issue is that only the root url ('/') can link to the correct component and any other url (e.g. '/first') does not link to their component. All of them link to the component which belongs to the '/' url.
When I use "a" tag in the vue file it will route to the right component - it's only when I input the url directly into the browser that it doesn't work
main.js:
import Vue from 'vue'
import router from './router/index.js'
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
// components: { App },
render: h => h(App)
})
index.js:
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
import First from '../components/firstPage.vue'
import Login from '../components/logIn.vue'
Vue.use(Router)
const routes =[
{
path: '/',
component: Login
},
{
path:'/first',
component:Hello
}
]
const router = new Router({
routes
})
export default router
I think you can also try as below. It's works, just try it! You can add mode: 'hash', to give default # in all urls.
import Vue from 'vue';
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
import First from '../components/firstPage.vue'
import Login from '../components/logIn.vue'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
base: '/your_base_name_if_you_want',
linkActiveClass: 'active-tab', //if you w
routes: [
{
path: '/',
redirect: '/if_you_want_to_redirect',
name: 'Login', //Whatever
component: {
render (c) { return c('router-view'); }
},
children: [
{
path: '/',
component: Login
name: 'Login',
meta: { title: 'Your title name' }
},
{
path:'/first',
component:Hello
name: 'Hello',
meta: { title: 'Your title name' }
}
]
}
]
})
export default router
You can also remove it from your urls using:
var router = new VueRouter({
history: true
});
Hope this helps you!
The default mode for vue-router is hash mode
This is why you can't get the 'Hello' component when your url is '/first'. Instead you can try input '/#/first'.
If you want to use history mode like '/first', set the mode attribute for your route object like this.
const router = new Router({
mode: 'history',
routes
})
Hope it helps you.