In a normal Vue (not Nuxt) project generated by vue-cli, using * in vue-router like this works:
export default new Router({
routes: [
{
path: "/about",
name: "about",
component: About,
children: [
{
path: "*",
component: About
}
]
}
]
});
All these routes works:
/about
/about/123
/about/123/abc/123/abc
Is there a way to do this in NuxtJs ? In Nuxt, routes are generated automatically from the files in pages folder. but * is an invalid character for file/folder name.
You use _ to denote that it's a wildcard, like:
pages/about/_.vue
Will resolve /about/*, which is what I believe you're looking for
And if you want the dynamic directory structure:
pages/about/_/abc/_/abc.vue
Would resolve for about/123/abc/123/abc (but it doesn't make much sense)
Related
Given the following route to the UserIndexPage in vue-router:
{
path: '/user/:userId/:orderId?',
name: 'userIndex',
props: true,
component: UserIndexPage
}
I'm aware that :orderId? makes this parameter optional. Now, I'd like to preprend a path to the orderId, that is, both of the following paths should match and route to the same component:
/user/:userId
/user/:userId/order/:orderId?
Is vue-router capable for this?
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.
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.
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
I am just getting started with Vue. I installed #Vue/Cli (that's version 3) and also cli-init so I can use version 2's commands. To create my project I used vue init webpack .
While running the app on the browser I noticed strange behaviour;
my routes are being changed!
Initial Route "localhost:8080/"
Navigating to the route url changes to "localhost:8080/#/"
Also with another route "localhost:8080/about"
Navigating to this route the url changes to "localhost:8080/about#/"
I don't understand what is going on. It renders the components though, but the url just changes.
Here is my routes config:
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
{
path: '/about',
name: 'AboutComponent',
component: AboutComponent,
},
{
path: '*',
name: '404',
component: HelloWorld,
},
],
});
No router links, I navigated by typing the paths.
My router setting is default.
You can probably answer the question yourself by reading vue-router documentation here (https://router.vuejs.org/guide/essentials/history-mode.html)
By default vue-router works in hash mode. Routes are changed in the browser with a 'hash' for compatibility with old browsers. Nowadays you can safely use history mode, and your URLs won't change in the browser location box.
However, I recommend that you read and fully understand how client-side routing works and what's the required server-side configuration you need to make your app work properly.
Welcome to Vue.JS!