http://localhost:8080/#/ this is the local host port that i opened but when i logged in it redirects to http://localhost:8080/?#/ . Then i have to logged in again to have my router go to http://localhost:8080/?#/admin
what is the significance of the question mark
I am using firebase authentication
here is my router index
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Admin from "../views/Admin.vue";
import ManageUsers from "../views/ManageUsers.vue";
import Funds from "../views/Funds.vue";
import CompleteDetails from "../views/CompleteDetails.vue";
import UserFunds from "../views/UserFunds.vue";
import ViewPost from "../views/ViewPost.vue";
import ResetPassword from "../views/ResetPassword.vue";
import Profile from "../views/Profile.vue";
import Overview from "../views/Overview.vue";
import Users from "../views/Users.vue";
import { fb } from "../firebase.js";
import AllUsers from "../views/Allusers.vue"
//User
import User from "../views/User.vue";
import MyProfile from "../views/MyProfile.vue";
import UserDashboard from "../views/Userdashboard.vue";
import Posts from "../views/Posts.vue";
import postEdit from "../views/postEdit.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/admin",
name: "admin",
component: Admin,
meta: { requiresAuth: true },
children: [
{
path: "funds/:user",
name: "funds",
component: Funds,
},
{
path: "userfunds",
name: "userfunds",
component: UserFunds,
},
{
path: "completedetails/:user",
name: "completedetails",
component: CompleteDetails,
},
{
path: "overview",
name: "overview",
component: Overview,
},
{
path: "posts",
name: "posts",
component: Posts,
},
{
path: "postEdit/:postId",
name: "postEdit",
component: postEdit,
},
{
path: "ViewPost/:postId",
name: "ViewPost",
component: ViewPost,
},
{
path: "users",
name: "users",
component: Users,
},
{
path: "allusers",
name: "allusers",
component: AllUsers,
},
{
path: "profile/:user",
name: "profile",
component: Profile,
},
{
path: "manageusers",
name: "manageusers",
component: ManageUsers,
},
],
},
{
path: "/user",
name: "user",
component: User,
meta: { requiresAuth: true, requiresType: true },
children: [
{
path: "myprofile/:user",
name: "myprofile",
component: MyProfile,
},
{
path: "posts",
name: "postsUser",
component: Posts,
},
{
path: "ViewPost/:postId",
name: "ViewPostUser",
component: ViewPost,
},
{
path: "userfunds",
name: "userfundsUser",
component: UserFunds,
},
{
path: "userDashboard",
name: "UserDashboard",
component: UserDashboard,
},
],
},
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/resetpassword",
name: "ResetPassword",
component: ResetPassword,
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = new VueRouter({
routes,
});
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some((x) => x.meta.requiresAuth);
const currentUser = fb.auth().currentUser;
if (requiresAuth && !currentUser) {
next("overview");
} else if (requiresAuth && currentUser) {
next();
} else {
next();
}
});
export default router;
Related
I have a vuetify (vue 3) app. When I (hard) refresh my web app, I'd like to be redirected to my very first route (for isntance, Skills). Instead I go to the last route I was on.
Here are my routes.
const routes = [
{
path: '/',
name: "Skills",
component: Skills,
beforeEnter: checkIfAuthenticated,
},
{
path: '/myskills',
name: "MySkills",
component: MySkills,
beforeEnter: checkIfAuthenticated,
},
{
path: '/history',
name: "History",
component: History,
beforeEnter: checkIfAuthenticated,
},
{
path: '/conversations',
name: "Conversations",
component: Conversations,
beforeEnter: checkIfAuthenticated,
},
{
path: '/:catchAll(.*)*',
name: "PageNotFound",
component: PageNotFound,
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
Thanks
this is my router
const router = createRouter({
linkActiveClass: "active",
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: DefaultLayout,
children: [
{
path: 'tucs',
name: 'tucs',
component: () => import('../views/tuc/index.vue'),
},
{
path: 'tucs/:id',
name: 'tuc',
component: () => import('../views/tuc/_id.vue'),
},
]
},
]
})
and this is navigation bar
<div class="side-container">
<router-link to="/tucs">TUC</router-link>
<router-link to="/users">Users</router-link>
</div>
when I am in '/tuc' rout router link get both active and exact-active classes But when I navigate to '/tuc/1' it doesn't get active class
what's the problem ?
Here is my router config file;
const appRoutes: Routes = [
{ path: '', redirectTo: 'giris', pathMatch: 'full' },
//Route for Ajax methods
{ path: 'Ajax/*', redirectTo: 'Ajax/*', pathMatch: 'full' },
{ path: 'giris', component: GirisComponent },
{ path: 'biyografi', component: BiyografiComponent },
{ path: 'galeri', component: GaleriComponent },
{ path: 'siirleri', component: SiirleriComponent },
{ path: '**', component: GirisComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
And here is my service codes;
#Injectable()
export class CPService {
private menuLink: string = "Ajax/Menu";
constructor(private _http: Http) {}
getMenu() {
return this._http.get(this.menuLink)
.map((response: Response) => response.json())
.catch(this._errorHandler);
}
_errorHandler(error: Response) {
console.error(error);
return Observable.throw(error || "Server Error");
}
}
And here is my Web Method;
[HttpGet]
public JsonResult Menu() {
var categories = entity.Category.Where(a => a.Active == true && a.Display == true).ToList();
foreach (var item in categories) {
item.RouteUrl = item.RouteUrl.ToLower().Replace("-", "");
}
return Json(categories, JsonRequestBehavior.AllowGet);
}
When i try to access the Web Method it just open a normal web page :( It doesn't call Menu method from AjaxController when i debug.
I'm waiting for your answers. I'm new at Angular :)
I just added the code below to the beginning of my RouteConfig.cs file
routes.MapRoute(
name: "Ajax",
url: "Ajax/{action}/{id}",
defaults: new { controller = "Ajax", action = "Menu", id = UrlParameter.Optional }
);
Then i changed my angular router config file like below (I just removed route for Ajax methods);
const appRoutes: Routes = [
{ path: '', redirectTo: 'giris', pathMatch: 'full' },
{ path: 'giris', component: GirisComponent },
{ path: 'biyografi', component: BiyografiComponent },
{ path: 'galeri', component: GaleriComponent },
{ path: 'siirleri', component: SiirleriComponent },
{ path: '**', component: GirisComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
I have appRoutes in my Angular 2 app
const appRoutes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{
path: 'component-two', component: AppComponent2,
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
]
},
];
How I can redirect from my LoginComponent to HomeComponent?
const appRoutes: Routes = [
{
path: '',
component: LoginComponent,
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
]
}
];
You have to do this.
you should use redirectTo for default redirect
const appRoutes: Routes = [
{ path: '/login', component: LoginComponent },
{ path: '/home', component: LoginComponent },
{ path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
from Html you can redirect like
<nav>
<a routerLink="/login" routerLinkActive="active">Login</a>
<a routerLink="/home" routerLinkActive="active">Home</a>
</nav>
inject Router to your HomeComponent's constructor
constructor(
private router: Router,
private service: HeroService
) {}
Then use this.router.navigate(['/login']); in your event function
for more details refer angular guide
Structure
app |- admin
|- users
|- userList.Component.ts
|- userDetails.Component.ts
|- admin.component.html (contains 'router-oulet')
|- admin.component.ts
|- admin.routes.ts
|- admin.module.ts
|- dogs
|- app.component.html (contains 'router-oulet')
|- app.component.ts
|- app.routes.ts
|- app.module.ts
app.routes.ts
const appRoutes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'dogs', component: DogListComponent, canActivate: [AuthGuard] },
{ path: 'dog/:id', component: DogDetailsComponent, canActivate: [AuthGuard]},
];
export const routing = RouterModule.forRoot(appRoutes);
admin.routes.ts
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AdminGuard],
children: [
{ path: '', redirectTo: '/admin/users' },
{ path: 'users', component: AdminUserListComponent },
{ path: 'user/:id', component: AdminUserDetailsComponent },
]
},
];
export const adminRouting = RouterModule.forChild(adminRoutes);
admin.userList.Component.ts
this._router.navigate(['/admin/user/', id]);
trying to navigate from AdminUserList ('admin/users') to AdminUserDetails ('admin/user/someId') but with no success.
(it seems like the scroller is going further down whenever i try to navigate to the user details)
any solution ?
you need to add pathMatch: 'full' in admin routes for default redirect,
admin.routes.ts
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AdminGuard],
children: [
{ path: '', redirectTo: '/admin/users', pathMatch: 'full' },
{ path: 'users', component: AdminUserListComponent },
{ path: 'user/:id', component: AdminUserDetailsComponent },
]
},
];
export const adminRouting = RouterModule.forChild(adminRoutes);
Update
To navigate back you have couple of ways,
// In the HTML
<a [routerLink]="['/admin']" >Back</a> or <a [routerLink]="['/admin/users']" >Back</a>
// Or create a back function and use in click binding in HTML
goBack = () => {
this.router.navigate(['/admin']);
or this.router.navigate(['/admin/users']);
}