I am building routes into my website using vue-router, I am attempting to setup my route file the same way coreui does it. I am currently receiving the error "[vue-router] route config component" for path: / cannot be a string id. Use an actual component instead.
./src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
// Containers
const DefaultContainer = '../containers/DefaultContainer';
// Componenets
// const Navbar = '../components/Navbar';
// Views
const Home = '../views/Home';
const PageNotFound = '../views/404';
// Routes
Vue.use(Router)
export default new Router ({
mode: 'hash',
routes: [
{
path: '/',
redirect: '/home',
name: 'Home | Portfolio | Tom Dickson',
component: DefaultContainer,
children: [
{
path: 'home',
name: 'Home | Portfolio | Tom Dickson',
component: Home
}
]
},
{
path: '*',
component: PageNotFound
}
]
})
Well... Came back to it and was right in front of me:
Changed
// Containers
const DefaultContainer = '../containers/DefaultContainer';
To
// Containers
const DefaultContainer = () => import('../containers/DefaultContainer');
Then updated the rest of my views...
Related
I am trying to change the route of my components based on a value saved within the vuex store. There are four different template files, saved within different directories (template1, template2 etc). I am pulling the template id from the details store and depending on this value would like to render the component from the correct directory.
For example, if the template value in the store is 2 then load all the template2/profile component, if it is three load the template3/profile component.
import VueRouter from 'vue-router'
import store from '../store';
Vue.use(VueRouter)
const setComponent = componentName => {
return () => import(`../template${store.getters['detailsStore/getTemplate']}/views/${componentName}`)
}
const routes = [
{
path: '/',
redirect: '/details'
},
{
path: '/profile',
name: 'Profile',
//component: () => import('../template2/views/Profile') // - this is how i was importing the component but couldn't access vuex store
component: () => setComponent('Profile'),
},
{
path: '/details',
name: 'Details',
component: () => setComponent('Details'),
}
];
const router = new VueRouter({
mode: 'history',
routes
})
export default router
I thought creating the setComponent function would help,. but i just get a blank page. Any help would be much appreciated
Vue2:
Your component is not done loading. This will do it:
const asyncComp = async (componentName) => {
const component = await import(`../template${store.getters['detailsStore/getTemplate']}/views/${componentName}`)
return component;
};
{
path: '/profile',
name: 'Profile',
component: () => asyncComp('Profile'),
}
Vue 3 solution:
Here you will have defineAsyncComponent() available
https://vuejs.org/api/general.html#defineasynccomponent
const asyncComp = (compName) => defineAsyncComponent(() => import(`../template${store.getters['detailsStore/getTemplate']}/views/${compName}`);
I am using VueJS 3 and Vue Router 4. I want to get the name of the current route using {{$route.name}} - this works so far. But it doesn't return any Route Name, if I'm accessing a route - in this Example I am trying to access /plans/1 - it doesn't return any value. here is my routes-array from the router:
const routes = [
{
path: '/plans',
name: 'Learning Plans',
component: ListPlans
},
{
path: '/plans/:id',
name: "Leaning Plan: Learn",
component: ViewPlan,
props: true
},
{
path: '/plans/:id/edit',
name: "Edit Learningplan",
component: EditPlan,
props: true
}
]
What am I doing wrong?
Thanks for every help!
Vue Router 4.x provides useRoute() for that:
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
onMounted(() => {
const id = route.params.id
})
}
}
DEMO
So I recently wanted to try and learn vuejs, so I used the CLI to create my project and to setup vue-router. Now, with the default vue router configuration the URL's show as /#/ and /#/about. However, in my configuration file I set the paths as / and /About. As I want the URL's to be like that, does anyone know how I can do this?
router > index.js
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () =>
import('../views/Home.vue'),
meta: { title: 'Home', description: 'Foo bar.' }
},
{
path: '/About',
name: 'About',
component: () =>
import('../views/About.vue'),
meta: { title: 'About', description: 'Lorem ipsum.' }
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
EDIT:
Okay, so I found that the best way to fix this in VueJS v3 is to just switch out createWebHashHistory with createWebHistory, it's literally that simple. After you've switched your imports and the createRouter object, it should all be working fine! 🥳
I'm trying to redirect/continue to a certain page using vue router, After a user signs up with email and password they should be redirected to another page but the home page just gets reloaded.
I'm not implementing login at the moment, Just the signup part. Every example that I follow works fine in redirecting with just "next()"
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Admin from "../views/Admin.vue";
import Overview from "../views/Overview.vue";
import Products from "../views/Products.vue";
import Orders from "../views/Orders.vue";
import { fb } from "../firebase";
Vue.use(VueRouter);
// The 'name' property hasn't been utilized yet
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/admin",
name: "admin",
component: Admin,
// By adding 'requiresAuth' we ensure this route/page and it's children will not be
// accessable by someone who is not authenticated
meta:{ requiresAuth: true },
children:[
{
// Don't put the '/' here
path: "overview",
name: "overview",
component: Overview
},
{
// Don't put the '/' here
path: "products",
name: "products",
component: Products
},
{
// Don't put the '/' here
path: "orders",
name: "orders",
component: Orders
}
]
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
// ============= This is the method in question ==============
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(x => x.meta.requiresAuth);
const currentUser = fb.auth().currentUser;
// This condition always passes, Even after the user is registered, So it always reloads
// the home page
if (requiresAuth && !currentUser) {
next('/');
// This never runs
} else {
next();
}
});
export default router;
I have two separate routing files where I am importing the component and defining their routing in each of its file and using it in index.js file. Here are my files code:
//router1.js
import Layout1 from 'Layouts/Panel.vue';
const Users = () => import('Views/Users.vue');
const Reports = () => import('Views/Reports.vue');
export default {
path: '/layout1',
component: Layout1,
redirect:'/layout1/reports',
children:[
{
path: 'reports',
component: Reports,
name:'Reports'
},
{
path: 'users',
component: Users,
name:'Users'
}
]
}
//router2.js
import Layout2 from 'Layout/Panel2';
const Demo1 = () => import('Views/Demo1');
const Demo2 = () => import('Views/Demo2');
export default {
path: '/',
component: Layout2,
redirect:'/demo1',
children:[
{
path: '/demo1',
component: Demo1
},
{
path: '/demo2',
component: Demo2
}
]
}
// index.js
import Vue from 'vue'
import Router from 'vue-router'
import router1 from './router1';
import router2 from './router2';
const NotFound = () => import('Views/NotFound.vue');
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
router1,
router2,
{
path: '*',
component: NotFound,
name:'NotFound',
},
]
})
Now, I want to redirect to specific url i.e "not-found" in case of wrong URL. In "NotFound" component I am adding below line of code in mounted lifecycle hook which redirects to URL "not-found".
this.$router.replace({ path: 'not-found' });
But if URL is having parameters or query string it will append to it. For e.g- http://localhost:8080/home/not-found
What I want is that it only shows http://localhost:8080/not-found How should I achieve this. Please help. Thanks!
try this in your mounted function. worked on my side.
this.$router.push({path: '/not-found'})