How to route to the admin application in a single app. Which from localhost:8080 to localhost:8080/administration which will open up the new application component?
I have tried to use some routing js but the drawer of the previous application still appears when I close the Admin drawer.
import Home2 from './App2.vue'
{
path: '/',
name: 'Home',
component: Home
}, {
path: '/admin ',
name: 'Home',
component: Home2
}
I want to make it forward to the fresh new application whereas admin page. If have any suggestion please advice me.
it seems in the App.vue you have declared router-view and sidebars. Instead declare sidebar inside router-view children and use nested routing.
Related
I have a route like: www.yoursite/sale/tesla
tesla is a parameter it can change. it made with vue.js
But when i have an url like: www.yoursite/sale/condition
i don' want the router go to the page,
i want it to do nothing (because it an other framework whom manage this page).
routes.push({
name: 'sale-brand',
path: '/sale/:brand',
component: resolve(__dirname, 'pages/views/SaleBrandPage.vue'),
});
how to solve this problem in vue.js ?
I'm trying to load specific components as per the user role in my Vue router.js.
Roles are handled through websanova vue auth and the easiest way to check if a user has a role is by doing Vue.auth.check('rolename')
In my route file, I've tried with something like this:
{
name: 'profile',
path: '/profile',
component: () => Vue.auth.check('secretary')
? import('#/components/secretaries/LayoutProfile')
: import('#/components/doctors/LayoutProfile'),
props: (route) => ({
editMode: false
}),
meta: {
auth: true
}
},
It seems to work for the first time: once the secretary logs in the secretaries/LayoutProfile component is mounted as expected.
But the issue comes if I log out as a secretary and log in as a doctor: the secretaries/LayoutProfile is still being used instead of doctors/LayoutProfile. The only way to fix it is by refreshing the page.
I'm not pretty sure how to deal with this, so far I can just imagine that router.js is loaded on my App mount lifecycle hook, therefore and despite log-in/log-out the router keeps the secretary component mounted.
I just want to be sure that this is not possible before thinking of another approach such as dynamically loading children components within a parent Profile component as per user roles.
FYI, I'm facing no errors at all, just wrong components mounted
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'm trying to implement routing over an spa which was only swapping out components based on setting true/false properties on the main VUE instance. I'm using the official Vue router for VUE.JS 2
There is a component, which i routed to the following path:
{
path: '/Foe/Bar/Details/:id',
components: {
layerTop: 'barDetail',
layerMiddle: notImportant
},
props: { layerTop: true }
},
So when the user clicks on the details button my components load as expected. My problem is when I try to navigate from this route to a new one but I want to keep my named 'layerTop' router-view as currently is. Basically I dont want to change the 'layerTop' view, just the layerMiddle view.
So I was thinking my path would look something like this:
path: 'Foe/Bar/Details/:barId/Categories/:categoryId
But I don't know how to map the :barId param to the Bar component's prop, and the categoryId to the Category comp's prop.
When it is a single parameter it works just like in the example above.
I'm pretty new to Vue and the router especially, tried to find an example on the docs but couldnt. Thank you for any input.
Check out the nested routes documentation.
https://router.vuejs.org/en/essentials/nested-routes.html
routes: [
{path: "/foo/bar". component: FooBar,
children [
path: "/:id", component: FooBarDetails,
children: [
{path: "categories/:categoryid", component: Category}
]
]
}
]