Vue Router, redirect from main page to parameter?

Question

Vue.js

Good day to all. Interested in the question .. How to implement such a feature?

It should work like this ->

There is /auth routing, after successful authorization it should translate to /id-12345, and - 12345 is the ID that is obtained through the API. That is, I do not need / - at all, but if I go to / - it gives me EMPTY (since such routing is not set), I need a main page of something like /id-12345. But besides everything else, after id-12345 I will have other routings - for example /id-12345/create, /id-12345/update.. and so on..

Actually 2 questions, how to implement such mechanics? At the moment, I have it implemented like this - Routing - /, just an empty component is connected to it, which displays a stupid route-view (although this should be displayed in layout Main), then I have another routing - /id-:id/, and in it an array (childrens). Also, I use the plugin - layout (Output of a different authorization template and immediately after authorization). in Main.vue (this is the layout after authorization) I check for authorization - if it is authorized and after requesting data - everything is OK, then I redirect to /id-12345 ..

Maybe there is a more elegant solution to this problem?

// There's another problem I'm running into..
There are 2 SCSS styles, auth and main. I noticed such a moment .. in auth I have body { background ... } one color, and in main - completely different .. After authorization, I redirect to the main page - /, thus - this.$router.push(' /'). in Main.vue directly import main.scss occurs, at the same time in auth import auth.scss is loaded. At the same time, after switching from the authorization page, the background is not updated. That is, if the color on the authorization page was white, then after authorization and importing the corresponding style it should be gray, but for some reason it does not change (requires a page reload). Such a moment got better like this - body { background: ... !important }, everything worked! But there is another point, if I want to log out (clear sessions and also return back to the authorization page), then I do the same - but this time, nothing changes. Unfortunately I couldn't find a solution..

I will be glad for your answers and help :) Thank you.

Answer 1

I found the solution like this:
1. Load the template in the main layout -> in scoped
2. If the background differs between layouts, then change only like this:
document.querySelector('body').style.background = ...