I have several components. This is the routes file
routes: [
{ path: '/members/logout', name: 'logout', component: Logout, meta: { pageTitle: 'Logout' } },
{ path: '/members/contact', name: 'contact', component: Contact, meta: {pageTitle: 'Contact'} },
{ path: '/', name: 'offline', component: LoggedOut, meta: {pageTitle: 'Logged Out'}, children: [
{ path: 'members/login', name: 'login' component: Authenticate, meta: {pageTitle: 'Authenticate'} },
{ path: 'members/signup', name: 'signup', component: Signup, meta: {pageTitle: 'Signup'} },
{ path: 'members/confirm', name: 'not-confirmed', component: NotConfirmed, meta: {pageTitle: 'NotConfirmed'} },
{ path: 'connect/callback', name: 'connect', component: Connect, meta: {pageTitle: 'Connect'} }
]}
]
On page load I'm checking to see if the user has logged or not before. If it has, I show the Login component, if not - the Signup. Everything works, but I want something else.
When I go to domain.com initially I don't want the link to switch to /members/login or /members/signup, only if the user presses a link inside the website. I want the route to remain domain.com and show the appropriate component between login or signup.
I tried with alias but that works only for one
Related
I have a SPA App in Vue JS, I have a side navigation bar which I want to stay visible for all pages. I have following links setup in side navigation bar
{
name: 'Overview',
icon: 'ti-dashboard',
path: 'overview',
},
{
name: 'Areas',
icon: 'ti-map-alt',
path: 'areas',
},
{
name: 'Assignments',
icon: 'ti-check-box',
path: 'assignments',
},
{
name: 'Records',
icon: 'ti-view-list-alt',
id: 'third-party',
children: [
{
name: 'Vaccination',
path: 'vaccination',
},
{
name: 'Out-of-Area Vaccinations',
path: 'vaccination/outer',
},
{
name: 'Surveys',
path: 'survey',
},
{
name: 'Archived',
path: 'archived',
},
],
}
...
Following is my router setup
const routes = [
{
path: '/',
component: App,
},
{
path: '/login',
component: require('../../../assets/js/components/Template/AppLogin.vue'),
},
{
path: '/platform/projects',
component: require('../../../assets/js/components/Template/Projects.vue'),
meta: {requiresAuth: true},
},
{
path: '/project/:projectId',
component: require('../../../assets/js/components/Template/UIComponents/SidebarPlugin/SideBarNew.vue'),
props: route => ({projectId: route.params.projectId}),
children: [
{
path: 'overview',
component: require('../../../assets/js/components/Template/mvdProjectOverview.vue'),
},
{
path: 'areas',
component: require('../../../assets/js/components/Template/AddVaccinationArea.vue'),
},
{
path: 'assignments',
component: require('../../../assets/js/components/Template/AssignAreaUsers.vue'),
},
{
path: 'vaccination',
component: require('../../../assets/js/components/Template/VaccinationRecord.vue'),
},
{
path: 'vaccination/outer',
name: 'projectOuterVaccinations',
component: require('../../../assets/js/components/Template/OuterVaccinations.vue'),
},
{
path: 'archived',
name: 'projectOuterVaccinations',
component: require('../../../assets/js/components/Template/ArchivedRecords.vue'),
},
{
path: 'survey',
component: require('../../../assets/js/components/Template/Surveys.vue'),
},
...
const router = new VueRouter({
routes,
mode: 'history'
})
When I visit vaccination/outer All of my side bar navigation links are appended with vaccination
Attaching images for more clarity
Here the URL is good and should stay like this only
When I navigate to vaccination/outer
The issue: Now all the links gets vaccination in between
I have a very basic knowledge of VUE ROUTER and ROUTER LINK. A help or guidance would be great. Thanks in advance.
I am pretty sure you are using paths from presented array as: <router-link to="LINK">some label</router-link>. However, as your path values are not starting with / - vue router will add value of to property to the current URL instead of replace it.
Let's imagine I am on /a/b/c URL.
When I click on <router-link to="dogs">Dogs</router-link> - I will be redirected to the /a/b/c/dogs.
When I click on <router-link to="/dogs">Dogs</router-link> - I will be redirected to the /dogs.
All you need to do is, start paths with the slash. So instead of path: vaccination/outer use path: /vaccination/outer and it will work as you want to.
I am trying to set up router link for my settings page, whenever I click on Account, it directs me to localhost/account instead localhost/settings/account I've provided children for settings page, why is this happening?
Settings.vue
router-link(to="/")
button(class='hover:text-blue-500 focus:outline-none')
| Profile
router-link(:to="{name: 'Account'}")
button(class='hover:text-blue-500 focus:outline-none')
| Account
router-view
{
path: "/settings",
name: "Settings",
component: Settings,
children: [{
path: "",
name: "Profile",
component: Profile
},
{
path: "/account",
name: "Account",
component: Account
}
]
},
Remove the leading slash at account's path. Leading slash indicates it is a route from the root.
{
path: "/settings",
name: "Settings",
component: Settings,
children: [{
path: "",
name: "Profile",
component: Profile
},
{
path: "account", // now it works as intended
name: "Account",
component: Account
}
]
},
I am trying to make these routes:
{
path: '/',
name: 'home',
component: Home
},
{
path: '/:username',
name: 'login',
component: Login
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard
}
But when I try to open /dashboard, I get Login page.
The order is important here. You can swap /dashboard and /:username position
[{
path: '/',
name: 'home',
component: Home
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard
},
{
path: '/:username',
name: 'login',
component: Login
}]
That's normal. Router is matching the routes from first to last.
/dashboard totally matches /:username with username == 'dashboard'
You should place the login roote at the end of the array, but even better you'd prefix it to be safer (like /user/:username)
I have a problem with dynamic routes in my vue.js application. When i enter page from a routerLink click everything works as it should. But when i refresh that page or i enter there from normal href the page acts weird. It looks then like it's not loading static assets like styles which were reset in public/style.css. Also component lifecycle methods are not firing up (created(), mounted() etc.).
Reproduction here:
1. Enter https://blooming-dusk-66903.herokuapp.com/profiles
2. Enter on one of profiles
3. Refresh when on https://blooming-dusk-66903.herokuapp.com/profiles/*******
here is my router file
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
path: "/landing",
name: "Landing",
component: Landing
},
{
path: "/register",
name: "RegisterForm",
component: RegisterForm
},
{
path: "/",
name: "Dashboard",
component: Dashboard
},
{
path: "/profile",
name: "UserProfile",
component: UserProfile
},
{
path: "/profile/:id",
name: "Profile",
component: Profile
},
{
path: "/edit-profile",
name: "EditProfile",
component: EditProfile
},
{
path: "/friends",
name: "Friends",
component: Friends
},
{
path: "/profiles",
name: "Profiles",
component: Profiles
},
{
path: "/friend-requests",
name: "FriendRequests",
component: FriendRequests
},
{
path: "/post/:id",
name: "Post",
component: Post
},
{
path: "/chat/:handle",
name: "ChatWith",
component: ChatWith
}
]
});
I have a route and sub route like these.
export default new Router({
routes: [
{
path: '/user',
component: UserView,
meta: {title: 'User Manager'},
children: [
{path: 'editor', component: EditorView, meta: {title: 'User Editor'}}
]
}
]
})
In UserView and EditorView both have mounted function.
export defaults {
mounted () {
console.log(this.$route)
}
}
And i type http://host:port/#/user/editor in browser, the console print twice $route data and they is same object. How could i get UserView route data?
{name: undefined, meta: {…}, path: "/user/editor", hash: "", query: {…}, …}
{name: undefined, meta: {…}, path: "/user/editor", hash: "", query: {…}, …}
UserView and EditorView is in the same page and they html look like this picture.
There are multiple route parts that are matched for a given URL when nested routes are involved. You'll need to search this.$route.matched for the specific route that you are interested in.
If you set a name for the route you're interested in, it'll make it easier to find:
{
path: 'editor',
name: 'editor', // <-- Add this
component: EditorView,
meta: {
title: 'User Editor'
}
}
mounted() {
const route = this.$route.matched.find(r => r.name === 'editor');
console.log(route.meta.title);
}