When I press refresh(F5) button then my router directs me to the main page. How do I stay on the same page when the page is refreshed?
that's route, mode is 'history'
const routes = [
{ path: '*', redirect: '/' },
{
path: '/', component: template_Default, redirect: '/Login',
children: [
{ path: 'Login', component: login_, name: 'Login' },
{ path: 'SignUp', component: signUp_, name: 'SignUp' }
]
},
{
path: '/Main', component: template_Home, name: 'Main', redirect: '/Main/Overview',
children: [
{ path: 'Overview', component: overview_, name: 'Overview' },
{ path: 'Customer', component: customer_, name: 'Customer' },
{ path: 'Task', component: task_, name: 'Task' },
{ path: 'Order', component: order_, name: 'Order' },
{ path: 'Product', component: product_, name: 'Product' },
{ path: 'Setting', component: setting_, name: 'Setting' }
]
},
{
path: '/ForgotPassword', component: forgotPassword_, name: 'ForgotPassword',
// redirect: '/ForgotPassword/GetEmail',
// children: [
// { path: 'GetEmail', component: forgotPasswordGetEmail, name: 'GetEmail' },
// { path: 'ReSend', component: forgotPasswordReSend, name: 'ReSend' }
// ]
}
]
And my controller,
router.beforeEach((to, from, next) => {
// redirect to login page if not logged in and trying to access a restricted page
const publicPages = ['/Login','/SignUp','/ForgotPassword'];
const authRequired = !publicPages.includes(to.path);
const loggedIn = store.getters.isLoggedIn;
if (authRequired && !loggedIn) {
return next('/Login');
}else next();
if(loggedIn){
AuthController.IsOnline();
}
})
thanks in advance..
The issue is that you have { path: '*', redirect: '/' } as the first item in your routes array. According to the documentation:
When using asterisk routes, make sure to correctly order your routes so that asterisk ones are at the end.
This is because Vue Router searches through your list of routes in order and returns the first matching route. An asterisk is going to match any and all routes so, when you refresh the page, it returns the first route and redirects you to '/'.
Same problem here, but my route have no { path: '*', redirect: '/' }
Here is my code.
export const routes = [
{
path:'/login',
component: login,
name: 'home'
},
{
path:'/',
component: mainapp,
name: 'mainapp',
meta: {
requiresAuth: true
},
children: [
{
path:'/dash',
component: dashboard,
name: 'dashboard'
},
{
path:'/dept',
component: dept,
name: 'department'
},
{
path: '/deptDetail',
component: deptDetail,
name: 'detail'
},
{
path:'/hrd',
component: HRD
},
{
path:'/notify',
component: notify
},
{
path:'/device',
component: device
},
{
path:'/setup',
component: setup,
name: 'setup'
},
{
path:'/scanArea',
component: area,
},
{
path:'/env',
component: environment,
},
{
path:'/record', /* debug page */
component: record,
},
{
path:'/redis', /* debug page */
component: redis,
},
{
path:'/permit',
component: permit,
},
{
path:'/app',
component: app,
}
]
},
]
Related
How can I have a route outside of navigation guards, to access it directly through an external url, without redirecting me to the login route.
The problem is for the password recovery page in which the user does not need to be logged in, if I go to the url https://my-site/recover-password, immediately redirected to the login page.
This is my code in router:
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home,
meta: {
user_type: 1
}
},
{
path: '/check-balance',
name: 'check-balance',
component: CheckBalanceComponent,
meta: {
user_type: 1
}
},
{
path: '/check-payment',
name: 'check-payment',
component: CheckPaymentsComponent,
meta: {
user_type: 1
}
},
{
path: '/payment-disabled',
name: 'payment-disabled',
component: DisabledMakePaymentComponent,
meta: {
user_type: 1
}
},
{
path: '/handle-payment',
name: 'handle-payment',
component: HandlePaymentsComponent,
meta: {
user_type: 1
}
},
{
path: '/handle-report',
name: 'handle-report',
component: HandleReportsComponent,
meta: {
user_type: 1
}
},
{
path: '/user-profile',
name: 'user-profile',
component: UserProfileComponent,
meta: {
user_type: 1
}
},
{
path: '/recover-password',
name: 'recover-password',
component: RecoverPasswordComponent,
meta: {
libre: 1
}
},
{
path: '/recover-link',
name: 'recover-link',
component: RecoverLinkComponent,
meta: {
libre: 1
}
},
{
path: '/login',
name: 'login',
component: LoginComponent,
meta: {
libre: 1
}
},
{
path: '/help',
name: 'help',
component: HelpComponent,
meta: {
user_type: 1
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
if(to.matched.some(record => record.meta.libre)){
next()
}
else if(store.state.user && store.state.user.user_type == 1){
next()
}
else {
next({
name: 'login'
})
}
})
export default router
I have an application in vue with vue router that works correctly, also in the router I use navigation guards to protect my routes, the problem is that now I want to have routes or components that work outside the navigation guards, for example a page of password recovery that the user receives a link and can access it directly, my problem is that i want to access to a recovery password direct from a external link it always redirects me to the login, I share my code:
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home,
meta: {
user_type: 1
}
},
{
path: '/check-balance',
name: 'check-balance',
component: CheckBalanceComponent,
meta: {
user_type: 1
}
},
{
path: '/check-payment',
name: 'check-payment',
component: CheckPaymentsComponent,
meta: {
user_type: 1
}
},
{
path: '/payment-disabled',
name: 'payment-disabled',
component: DisabledMakePaymentComponent,
meta: {
user_type: 1
}
},
{
path: '/handle-payment',
name: 'handle-payment',
component: HandlePaymentsComponent,
meta: {
user_type: 1
}
},
{
path: '/handle-report',
name: 'handle-report',
component: HandleReportsComponent,
meta: {
user_type: 1
}
},
{
path: '/user-profile',
name: 'user-profile',
component: UserProfileComponent,
meta: {
user_type: 1
}
},
{
path: '/recover-password',
name: 'recover-password',
component: RecoverPasswordComponent,
meta: {
free: 1 //this outside navigation guards
}
},
{
path: '/recover-link',
name: 'recover-link',
component: RecoverLinkComponent,
meta: {
free: 1
}
},
{
path: '/login',
name: 'login',
component: LoginComponent,
meta: {
free: 1
}
},
{
path: '/help',
name: 'help',
component: HelpComponent,
meta: {
user_type: 1
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
if(to.matched.some(record => record.meta.free)){
next()
}
else if(store.state.user && store.state.user.user_type == 1){
next()
}
else {
next({
name: 'login'
})
}
})
export default router
I have the following route configuration:
const routes: Routes = [
{
path: '',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{
component: DashboardComponent,
path: ''
},
{
component: UnitComponent,
path: 'unit/:serialnumber',
children: [
{ path: '', redirectTo: 'realtime', pathMatch: 'full'},
{
path: 'manager',
component: UnitManagerComponent,
canActivate: [SysAdminGuard]
},
{ path: 'realtime', component: UnitRealtimeComponent },
{ path: 'history', component: UnitHistoryComponent },
{ path: 'consumption', component: UnitConsumptionComponent },
{ path: 'consumption/:range', component: UnitConsumptionComponent },
{ path: 'edit', component: UnitEditComponent }
]
}
]
}
...
image that i am in current route state
http://127.0.0.1:4200/#/unit/000000003/consumption/monthly
and i want to navigate to another unit with a different serialnumber:
http://127.0.0.1:4200/#/unit/000000001/consumption/monthly
if i make
this.router.navigate(['/unit','000000001'])
i will go to http://127.0.0.1:4200/#/unit/000000001/realtime
is there any way to change a specific parameter in the route and keep the childs route ?
I'm having trouble running my Vue.js application on a server. It works fine when I'm running locally on macOS or windows. This is the error I get when running 'npm run dev':
These dependencies were not found:
* #/components/account/Profile in ./src/router/index.js
* #/components/account/Plan in ./src/router/index.js
* #/components/account/Team in ./src/router/index.js
* #/components/account/Integration in ./src/router/index.js
* babel-runtime/helpers/extends in ./src/store/index.js
I have checked that the same version of Vue.js is installed -> vue#2.5.13 + really have no clue how to fix this problem. I'm guessing it's a dependency/OS error because it runs with no errors locally.
Does anyone know to fix this or point me somewhere useful? Any help is hugely appreciated!
Edit***
Contents of Index.js below - I'm using Webpack.
import store from '../store'
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/Home'
import Error404 from '#/components/404'
import Login from '#/components/Login'
import Register from '#/components/Register'
import FreeTrial from '#/components/FreeTrial'
import Product from '#/components/Product'
import Services from '#/components/Services'
import Team from '#/components/Team'
import Pricing from '#/components/Pricing'
import Help from '#/components/Help'
import SharedList from '#/components/SharedList'
import ListView from '#/components/App/ListView'
import Blog from '#/components/Blog'
// Account components, loaded lazily
const AccountSettings = r =>
require.ensure([], () => r(require('#/components/AccountSettings')), 'accountComponents')
const ProfileSection = r =>
require.ensure([], () => r(require('#/components/account/Profile')), 'accountComponents')
const PlanSection = r =>
require.ensure([], () => r(require('#/components/account/Plan')), 'accountComponents')
const TeamSection = r =>
require.ensure([], () => r(require('#/components/account/Team')), 'accountComponents')
const IntegrationSection = r =>
require.ensure([], () => r(require('#/components/account/Integration')), 'accountComponents')
// App components loaded lazily, grouped by the 'appComponents' param
const MainApp = r =>
require.ensure([], () => r(require('#/components/MainApp')), 'appComponents')
const Default = r =>
require.ensure(
[],
() => r(require('#/components/App/Default')),
'appComponents'
)
const Search = r =>
require.ensure(
[],
() => r(require('#/components/App/Search')),
'appComponents'
)
const Templates = r =>
require.ensure(
[],
() => r(require('#/components/App/Templates')),
'appComponents'
)
const Lists = r =>
require.ensure(
[],
() => r(require('#/components/App/Lists')),
'appComponents'
)
const Outreach = r =>
require.ensure(
[],
() => r(require('#/components/App/Outreach')),
'appComponents'
)
import { Message } from 'element-ui'
Vue.use(Router)
export const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '*',
name: '404',
meta: { title: `Page not found` },
component: Error404
},
{
path: '/help',
name: 'Help',
meta: { title: `Help` },
component: Help
},
{
path: '/product',
name: 'Product',
meta: { title: `Product` },
component: Product
},
{
path: '/services',
name: 'Services',
meta: { title: `Services` },
component: Services
},
{
path: '/team',
name: 'Team',
component: Team
},
{
path: '/pricing',
name: 'Pricing',
meta: { title: `Pricing` },
component: Pricing
},
{
path: '/blog',
name: 'Blog',
meta: { title: `Blog` },
component: Blog
},
{
path: '/login',
name: 'Login',
meta: { title: `Login` },
component: Login
},
{
path: '/register',
name: 'Register',
meta: { title: `Register` },
component: Register
},
{
path: '/trial',
name: 'FreeTrial',
meta: { title: `Free trial` },
component: FreeTrial
},
{
path: '/viewlist/:id',
name: 'SharedList',
meta: { title: `View shared list` },
component: SharedList
},
{
path: '/app',
component: MainApp,
beforeEnter (from, to, next) {
if (store.getters.getUserStatus.loggedIn) {
next()
} else {
Message({
message: `You can't access the app because you're not logged in`,
type: 'error'
})
next({ name: 'Login' })
}
},
children: [
{
path: '/account',
component: AccountSettings,
beforeEnter (from, to, next) {
if (store.getters.getUserStatus.loggedIn) {
next()
} else {
Message({
message: `You can't access your profile because you're not logged in. Please log in again`,
type: 'error'
})
next({ name: 'Login' })
}
},
children: [
{
path: '',
name: 'ProfileSection',
meta: { title: `Edit profile` },
component: ProfileSection
},
{
path: 'plan',
name: 'PlanSection',
meta: { title: `Manage plan` },
component: PlanSection
},
{
path: 'team',
name: 'TeamSection',
meta: { title: `Manage team` },
component: TeamSection
},
{
path: 'integration',
name: 'IntegrationSection',
meta: { title: `Integration` },
component: IntegrationSection
}
]
},
{
path: '',
name: 'AppDefault',
meta: { title: `Explore saphire` },
component: Default
},
{
path: 'search',
name: 'AppSearch',
meta: { title: `Search influencers` },
component: Search
},
{
path: 'templates',
name: 'AppTemplates',
meta: { title: `Manage templates` },
component: Templates
},
{
path: 'lists',
name: 'AppLists',
meta: { title: `Manage lists` },
component: Lists
},
{
path: 'list/:id',
name: 'ListView',
meta: { title: `View list` },
component: ListView
},
{
path: 'outreach',
name: 'AppOutreach',
meta: { title: `Outreach` },
component: Outreach
}
]
}
]
})
router.beforeEach((to, from, next) => {
// Change title based on meta.title property
if (to.meta.title) {
document.title = `saphire | ${to.meta.title}`
} else {
document.title = `saphire`
}
// Checking if inside or outside app and assigning the result to global store variable
if (to.matched.length > 0) {
to.matched[0].path === '/app'
? store.commit('setAppState', true)
: store.commit('setAppState', false)
}
next()
})
export default router
I'm working with AngularJS 2 routes. I have one layout with fixed header and dynamic sidebar and dynamic content. I have created following routes:
const appRoutes: Routes = [
{
path: '', component: DashboardComponent, children: [
{ path: '', component: HeaderComponent, outlet: 'header' },
{ path: '', component: SidebarComponent, outlet: 'sidebar' },
{ path: '', component: ContentComponent, outlet: 'content' },
{ path: 'profile', component: ProfileComponent, outlet: 'content' }
],
},
{ path: 'login', component: LoginComponent },
];
When I visit to my home page i.e. http://localhost/ it works fine. Currently what I need is for profile page only my content outlet should change keeping same header and sidebar content as my home page.
Main thing is when I visit to /profile page it should show the same header and sidebar content and only content which is inside content outlet should change and should show my profile content data.
I have created following routerLink
[routerLink]="['/profile']"
Try moving /profile as a children of ContentComponent.
const appRoutes: Routes = [{
path: '', component: DashboardComponent, children: [
{ path: '', component: HeaderComponent, outlet: 'header' },
{ path: '', component: SidebarComponent, outlet: 'sidebar' },
{ path: '', component: ContentComponent, outlet: 'content'
children: [
{ path: 'profile', component: ProfileComponent }
]
},
]},
{ path: 'login', component: LoginComponent },
];
EDIT 1
Maybe you can try to create a LayoutComponent in which you can have the named outlets and a generic outlet for your template.
something like:
const appRoutes: Routes = [
{ path: '', component: LayoutComponent,
children: [
{ path: '', component: HeaderComponent, outlet: 'header' },
{ path: '', component: SidebarComponent, outlet: 'sidebar' },
{ path: '', component: ContentComponent,
children: [
{ path: '', component: DashboardComponent }
{ path: 'profile', component: ProfileComponent }
]
},
]
},
{ path: 'login', component: LoginComponent }
];
// LayoutComponent template
<router-outlet name="header"></router-outlet>
<router-outlet name="sidebar"></router-outlet>
<router-outlet></router-outlet>