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! 🥳
Related
I'm using below code to create my vue app routes and vuex-oidc vuexOidcCreateRouterMiddleware to protect them.
My routes are not only in this file. I'm using axios in App.vue to get other routes from an api endpoint and add them to routes using this.$router.addRoute()
When these extra routes are loaded beforeEach applied vuex-oidc to all routes.
Up to this point all works perfectly.
My problem is
I need to exclude "Welcome" route so vuex-oidc will not be applied to it. So it will be accessible to all visitors not only logged-in users.
How can i edit following line to exclude Welcome route?
router.beforeEach(vuexOidcCreateRouterMiddleware(store, 'oidcStore'))
or any other solution.
Thanks
import { createRouter, createWebHistory } from 'vue-router'
import { vuexOidcCreateRouterMiddleware } from 'vuex-oidc'
import store from '#/store'
const routes = [
{
path: process.env.BASE_URL + 'oidc-callback',
name: 'OidcCallback',
component: () => import(/* webpackChunkName: "OidcCallback" */ '../views/OidcCallback.vue')
},
{
path: process.env.BASE_URL + 'profile',
name: 'Profile',
component: () => import('../views/Profile.vue'),
},
{
path: process.env.BASE_URL + 'oidc-silent-renew',
name: 'OidcSilentRenew',
component: () => import('../views/OidcSilentRenew.vue'),
},
{
path: process.env.BASE_URL + 'welcome',
name: 'Welcome',
component: () => import('../views/Welcome.vue'),
},
]
const router = createRouter({
base: '/vue3/',
history: createWebHistory(),
routes
})
router.beforeEach(vuexOidcCreateRouterMiddleware(store, 'oidcStore'))
export default router
Seems I was overlooking. Solution is very simple. Just add isPublic and set it to true under meta in route
const routes = [
...
{
path: process.env.BASE_URL + 'welcome',
name: 'Welcome',
component: () => import('../views/Welcome.vue'),
meta: {
isPublic: true
}
},
...
]
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'})
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...
i'm trying to use VueRouter 2.2.1 in my Laravel application and for some reason my URL's (although working) show the # symbol in a weird way
http://myapp.dev/admin#/
Instead of
http://myapp.dev/admin/#/
As i would normally expect...
This is my VueRouter configuration
const Router = new VueRouter({
routes: [
{
path: '/',
component: App,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: Dashboard
}
]
}
]
});
And on the PHP side of things i'm just defining a catch all route for the /admin section of the Application
// Catch-all Route, sends GET requests to VueRouter //
Route::get('{all?}', function() {
return view('index');
})->where(['all' => '(.*)'])->name('catchall');
Like this, is there anything i'm doing wrong? It is working but it just kinda bugs me that the # just floats there.
You have to enable history mode, as stated here, I dont see that in your vue-router config.
const Router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: App,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: Dashboard
}
]
}
]
});
You have to do it on server side, just redirect the route to one ended with '/'
As in laravel:
Route::get('{all?}', function() {
return view('index');
})->where(['all' => '^/admin\/$'])->name('catchall');
now just visit /admin/#/
please help me with this error on console
router.map is not function
I am using browserify and laravel5.3
here is my app.js code :
import Vue from 'vue/dist/vue.js';
var VueRouter = require('vue-router');
import App from '../components/App.vue';
import Dashboard from '../components/Dashboard.vue';
import Home from '../components/Home.vue';
import Register from '../components/Register.vue';
import Signin from '../components/Signin.vue';
Vue.use(VueRouter);
export var router = new VueRouter()
router.map({
'/': {
name: 'home',
component: require('../components/Home.vue')
},
'/register': {
name: 'register',
component: Register
}
})
router.start(App, '#app');
vue-router 2.0, like Vue 2.0 has significant changes from v1.
In this specific case, routes are now declared differently:
new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
https://router.vuejs.org/en/essentials/getting-started.html
I strongly encourage you read up on what has changed in both.