I am using Vue("vue": "^2.5.2") to make a SPA,this is my route("vue-router": "^3.0.1"):
routes: [
{
path: '/',
name: 'Home',
component: Home
}]
when I request : http://localhost:8080.It could open the page.But when I tweak the route like this:
routes: [
{
path: '/home',
name: 'Home',
component: Home
}]
And I request : http://localhost:8080/home .It could not open the page.Why would this happen ,how to fix it?
As stated in the vue router docs:
The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
You should find your page at http://localhost:8080/#/home
You can read more about this here
Related
Migration guide says:
Named children routes with an empty path no longer appends a slash
his has an important side effect about children redirect records like these:
const routes = [
{
path: '/parent',
component: Parent,
children: [
// this would now redirect to `/home` instead of `/parent/home`
{ path: '', redirect: 'home' },
{ path: 'home', component: Home },
],
},
]
Notice:
// this would now redirect to /home instead of /parent/home
But I would like to redirect to /parent/home instead of /home
Docs:
https://router.vuejs.org/guide/migration/#named-children-routes-with-an-empty-path-no-longer-appends-a-slash
So how can one achieve original behaviour before this change with new router? I would like to have relative redirect to a child.
Vue2 playground it works as expected.
Vue3 playground broken by change.
This question already has an answer here:
Vue 3 router - router-link-active not working
(1 answer)
Closed 6 months ago.
I am currently in my Vue learning journey. I have come across a situation where I need to show my link as active for matching route too. For example: I have route /programs which shows Program link as active without any issues but I also want /programs/view to set Program link as active as well. How do I do it in Vue Router?
These are my route definitions in router.js file
const routes = [
{ path: '/', component: Main, name: 'main', redirect: '/dashboard', children:
[
{ path: '/dashboard', component: Dashboard, name: 'dashboard' },
{ path: '/programs', component: Programs, name: 'programs' },
{ path: '/programs/view', component: ViewProgram, name: 'view_program'},
...OTHER ROUTES
]
},
{ path: '/login', component: Login, name: 'login', meta: {noAuth: true} },
{ path: '/:pathMatch(.*)*', redirect: '/dashboard'}
];
I searched and found that router-link-active class should be automatically applied to Program link when the route starts with /programs, but it is not working in my case.
EDIT
I have found a workaround by manually matching route and appending active class to the router link. But I still expect an easier way to do this.
In my Program link:
<router-link to="/programs" :class="{'router-link-active': $route.fullPath.match(/\b\programs/) }">
<span>Programs</span>
</router-link>
I am using regex to match path pattern. So, every route that contains programs will get active class here.
dont u gotta do that in the component and not in the router?
take what i say with a grain of salt im
This is similar to a lot of questions asked re: setting up Vue Router with an Express server using the connect-history-api-fallback middleware as directed in the Vue Router docs, but I’m still running into two issues:
When I refresh any page, I am redirected to my Home route (e.g. http://localhost:8080/451)
When I enter a direct link in the address bar (e.g. http://localhost:8080/451/alerts), I am also redirected to my Home route
I am not receiving a “Cannot GET /” error, so I am pretty confident that connect-history-api-fallback is implemented correctly.
For context, this is what my router looks like:
const router = new VueRouter({
base: __dirname,
mode: 'history',
routes: [
{
component: Home,
name: 'home',
path: '/:siteId',
},
{
component: SuperAdmin,
name: 'super-admin',
path: '/:siteId/super-admin',
},
{
component: Alerts,
name: 'alerts',
path: '/:siteId/alerts',
},
{
component: LPRAdmin,
name: 'lpr-admin',
path: '/:siteId/lpr-admin',
},
{
component: ControlCenterAdmin,
name: 'control-center-admin',
path: '/:siteId/control-center-admin',
},
],
});
And this is my configuration in the server:
const staticFileMiddleware = express.static('build/public');
app.use(staticFileMiddleware);
app.use(history({
verbose: true,
}));
app.use(staticFileMiddleware);
Has anyone dealt with and solved this or a similar issue? Thanks in advance!
For anyone who comes across this in the future, we were able to solve it! Somewhat embarrassingly, we forgot we were rerouting users to the home page after authentication every time the app mounted. We removed
this.$router.push(`/${siteId}`);
from our App.js and the issues are resolved!
I want to open the same page but by using two different routes. The issue is when clicking on link 1 and after that click on link 2 my page is not being refreshed, when I print this.$route it shows old route info. How to solve this issue?
Link 1 - http://localhost:8080/test1route
Link 2 - http://localhost:8080/test2route
import TestComponent from '#/Component/TestComponent'
export default [{
path: '/test1route',
component: TestComponent,
children: [{
path: '/',
component: () => import('#/List')
},
{
path: '/test2route',
component: () => import('#/List')
}]
}]
Based on your route definition, the path to Link2 would actually be http://localhost:8080/test1route/test2route, since 'test2route' is a child of 'test1route'.
I have a portfolio site portfolio.com and a subdomain which points to a VueJS frontend hosted on Netlify vuejsapp.portfolio.com
Users upload files to the app and it generates a download link URL, say vuejsapp.portfolio.com/download/048677a. When I navigate to the link within the VueJS app (by clicking a button to redirect after it's uploaded) it redirects to the Download component without issue. But if I copy and paste that link directly in my browser it throws a 404 error. Why is this?
I know it has to do with a Vue Router configuration but I can't seem to find much information about it or perhaps I'm looking in the wrong place. Could someone tell me what I'm missing or point me to some relevant documentation please?
My router.js file:
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/about",
name: "about",
component: About
},
{
path: "/download/:id",
name: "download",
component: Download,
props: route => ({ id: route.params.id }),
}
]
});
Since the code/setup is running properly on your local environment and only breaking on Netlify its pretty clear that you're running into a wrong server configuration issue.
Your Netlify environment has to know that it should always route any requests to / and leave the routing to your Vue App. You can read more about how to resolve that in the Netlify docs.