I am working on Nuxtjs application and I'm using router-module.
Static route is working however dynamic routing is not working. For example when I access url /users/123, it showing Not Found. here is my router file:
{
path: '/user/:id',
name: 'user',
component: user
}
Related
I am currently building a module for a CMS (Joomla) - the frontend of this module is created with VUE 3 incl. Router. The prototype is already working and can be integrated into the CMS Module. Also the router works. If a link is clicked within the VUE app, the corresponding view is displayed. But if the user is now on a subpage of the VUE App and refreshes it (F5 / Ctrl + F5), the page is not found - i think because it exists only in the Vue Router.
To the URL structure:
domain.tld <-- This is where the Vue application is located.
domain.tld/list-:id/item-:id <-- This is the URL for an ITEM
Now I know that it doesn't work like that because the webserver tries to interpret the URL which it can't because parts of it are from VUE.
Is it possible to reconfigure the vue router to work with parameters instead of a "physical" structure?
from: "domain.tld/liste-:id/item-:id"
to: "domain.tld?liste=:id&item=:id"
i think this could solve the issue but i dont know...
Edit:
When i try to use this in the router it still works but has the same effect because yeah "appname" cannot be found by the server..
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/appname?playlist=:id',
name: 'PlaylistDetails',
component: PlaylistDetails,
props: true
},
{
path: '/appname?playlist=:id&video=:vid',
name: 'Player',
component: Player,
props:true
},
]
You can assign a controller to a wild-card, which always return you Vue app:
$router->addMap('/domain.tld/*', 'VueController');
Another approach would be using a # in your URL. Everything after your # will be ignored by the server.
Based on the information i've got from Roman i have changed the routes and added a 404 to the router which refers to home. The views are now been loaded as "url params".
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/#appname?playlist-:id',
name: 'PlaylistDetails',
component: PlaylistDetails,
props: true
},
{
path: '/#appname?playlist-:id&video=:vid',
name: 'Player',
component: Player,
props:true
},
{
// Match all paths vue2 Use * vue3 Use /:pathMatch(.*)* or /:pathMatch(.*) or /:catchAll(.*)
path: "/:pathMatch(.*)*",
name: "404",
component: Home
}
]
If now someone tries to open a site via directlink he got redirected to home.
There might be a better solution but this works when you are using vue inside another PHP app where you are not able to configure the server.
additional info for 404:
https://qdmana.com/2020/12/20201223195804176T.html
It looks that Hotlinks (directly into a view) are not possible in my scenario.
Flow: backend sends o-auth link to Vue, user clicks on link which directs to stripe's form, after completion of the form it directs user to a URL I have specified.
I have a vue client app that I want to use stripe connect with. From my backend app, I am sending a [o-auth link][1] where it will let users fill out their Stripe information and upon completion, it will redirect me to a URL I specify in Stripe settings(http://localhost:8080/test and this is valid in test mode).
The problem I am facing is that even though the link is correct, vue won't redirect to test page and stay on the current page. test page renders when I redirect it via <router-view></router-view> in the template. I do have my router configured properly so I don't why it doesn't go to the redirect link and render that page.
my router setup:
routes: [
{
path: '/',
name: 'mainContent',
component: MainContent
},
{
path: '/test',
name: 'test',
component: test
},
{
path: '/manage',
name: 'manage',
component: Manage,
meta: {
requiresAuth: true,
}
},
]
})
[1]: https://stripe.com/docs/connect/express-accounts
I am trying to use Vue-Router to pattern URLs in my new project so they look just like URLs in an existing (non-Vue) application. Existing application URLs look like this:
/#!page1
/#!page2
My Vue Router currently looks like this:
const router = new VueRouter({
routes: [
{
path: '/',
redirect: '/page1'
},
{
path: '/page1',
component: Assessments
},
{
path: '/page2',
component: Assessments
}
]
})
But, of course, this generates URLs that look like this:
/#/page1
/#/page2
How can I configure my router to mimic the /#!route pattern?
You can use the base option:
base
type: string
default: "/"
The base URL of the app. For example, if the entire single page
application is served under /app/, then base should use the value
"/app/".
https://router.vuejs.org/en/api/options.html#base
I have tried it with your case, it also works with /#!.
I have an angular 2 .net core app I downloaded from:
https://github.com/chsakell/aspnet-core-signalr-angular
I attempted to add a new module and changed the routing to this:
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: '', component: HomeComponent },
{ path: 'another', component: AnotherComponent },
];
"another" being the new component. So I expect that entering: "http://localhost:5000/#/another" into the address bar should load "another" module. But this doesn't work. It loads "another" module if I link the default path which is '' to AnotherComponent. The only path that works in the default path which is ''.
Can anyone see what I am doing wrong? No errors display in the console.
Thanks
If any one else has an issue similar to this - if you're using MVC routing alongside angular routing. The urls need to be specified for MVC as well. So when you add a new route for angular it attempts to find a controller/action that probably doesn't exist. So what I did was this:
[Route("Home")]
[Route("Home/Another")]
[Route("Home/Start")]
Public IActionResult Index()
{
return View();
}
And the angular routes need to match.
I've deployed a VueJS project to a domain like www.example.com, however, I want to move it to a subfolder so that I can access it like www.example.com/v1
How can I set the base URL or root URL of a VueJS project?
Note: It's not about the base URL for Vue-resource
You can use option base as /v1/ to move all routes to have base as /v1/.
The base URL of the app. For example, if the entire single page application is served under /app/, then base should use the value "/app/".
Old
How about moving all your routes to nested route, with parent route being /v1:
const router = new VueRouter({
routes: [
{ path: 'v1', component: BaseView,
children: [
{
// UserProfile will be rendered inside BaseView's <router-view>
// when /v1/profile is matched
path: 'profile',
component: UserProfile
},
{
// UserPosts will be rendered inside BaseView's <router-view>
// when /v1/posts is matched
path: 'posts',
component: UserPosts
}
]
}
]
})