I am trying to figure out how to open a Vuetify dialog using the Vue router.
The vue-router is a new experience for me so still learning it. But Ive been working on this all day and have not come anywhere close to solving the issue.
Issue: I need to update the v-model to true to open the dialog when a router link is clicked
I have tried using meta tags and the beforerouterupdate() method to try and update the v-model but that has not worked.
This is my current route file
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/backup',
name: 'backup',
component: BackupDialog,
children: [
{
path: '/backup/:options',
name: 'optionsModal',
component: DbBackupOptions,
meta: {
showModal: true
}
},
]
},
]
I am not sure I have the right configuration at this point. I also tried using dynamic routing but I could not figure that out either.
Is there some one that can give me some insight on how to resolve this issue or pointers in the right direction ?
I have figured out the issue mostly to the help of a video I found on Youtube.
Vue Router Based Modal
Related
I have a route setup where there's a parent with child routes, like this:
{
//name: 'ProductComments',
path: 'comments',
children: [
{
name: 'ProductComments',
path: '',
component: ProductComments
},
{
name: 'EditProductComment',
path: ':commentId/edit',
component: EditProductComment
}
]
}
With the above configuration, Vue Router will render my ProductComments component if I visit /comments. However, if I comment the name out and uncomment it on the parent, it won't render the ProductComments component and will give me the warning:
The route named "ProductComments" has a child without a name and an empty path. Using that name won't render the empty path child so you probably want to move the name to the child instead. If this is intentional, add a name to the child route to remove the warning.
But why is this? The child is always a more "specific" route, so why does giving it a name magically cause it to render, whereas giving the name to the parent stops it?
I think this is one of those things that was decided by the Vue team and only they can really answer why. I was curious about it though and found this
github thread talking about the exact same thing. Doesn't seem like a satisfactory answer was ever found but the comment I specifically linked contains a workaround which is just adding a redirect:
{
path: '/user/:id',
name: 'user',
/* Explicitly tell the router to redirect to default children */
redirect: '/user/:id/',
component: User,
children: [
{
path: '',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
Set everything in the parent; it makes more semantic sense too.
My parent/child routes function like this. I haven't had any problems with this (so far?).
{
name: 'ProductComments',
path: 'comments',
component: ProductComments
children: [
{
name: 'EditProductComment',
path: ':commentId/edit',
component: EditProductComment
}
]
}
This question already has an answer here:
Vue 3 router - router-link-active not working
(1 answer)
Closed 6 months ago.
I am currently in my Vue learning journey. I have come across a situation where I need to show my link as active for matching route too. For example: I have route /programs which shows Program link as active without any issues but I also want /programs/view to set Program link as active as well. How do I do it in Vue Router?
These are my route definitions in router.js file
const routes = [
{ path: '/', component: Main, name: 'main', redirect: '/dashboard', children:
[
{ path: '/dashboard', component: Dashboard, name: 'dashboard' },
{ path: '/programs', component: Programs, name: 'programs' },
{ path: '/programs/view', component: ViewProgram, name: 'view_program'},
...OTHER ROUTES
]
},
{ path: '/login', component: Login, name: 'login', meta: {noAuth: true} },
{ path: '/:pathMatch(.*)*', redirect: '/dashboard'}
];
I searched and found that router-link-active class should be automatically applied to Program link when the route starts with /programs, but it is not working in my case.
EDIT
I have found a workaround by manually matching route and appending active class to the router link. But I still expect an easier way to do this.
In my Program link:
<router-link to="/programs" :class="{'router-link-active': $route.fullPath.match(/\b\programs/) }">
<span>Programs</span>
</router-link>
I am using regex to match path pattern. So, every route that contains programs will get active class here.
dont u gotta do that in the component and not in the router?
take what i say with a grain of salt im
This is similar to a lot of questions asked re: setting up Vue Router with an Express server using the connect-history-api-fallback middleware as directed in the Vue Router docs, but I’m still running into two issues:
When I refresh any page, I am redirected to my Home route (e.g. http://localhost:8080/451)
When I enter a direct link in the address bar (e.g. http://localhost:8080/451/alerts), I am also redirected to my Home route
I am not receiving a “Cannot GET /” error, so I am pretty confident that connect-history-api-fallback is implemented correctly.
For context, this is what my router looks like:
const router = new VueRouter({
base: __dirname,
mode: 'history',
routes: [
{
component: Home,
name: 'home',
path: '/:siteId',
},
{
component: SuperAdmin,
name: 'super-admin',
path: '/:siteId/super-admin',
},
{
component: Alerts,
name: 'alerts',
path: '/:siteId/alerts',
},
{
component: LPRAdmin,
name: 'lpr-admin',
path: '/:siteId/lpr-admin',
},
{
component: ControlCenterAdmin,
name: 'control-center-admin',
path: '/:siteId/control-center-admin',
},
],
});
And this is my configuration in the server:
const staticFileMiddleware = express.static('build/public');
app.use(staticFileMiddleware);
app.use(history({
verbose: true,
}));
app.use(staticFileMiddleware);
Has anyone dealt with and solved this or a similar issue? Thanks in advance!
For anyone who comes across this in the future, we were able to solve it! Somewhat embarrassingly, we forgot we were rerouting users to the home page after authentication every time the app mounted. We removed
this.$router.push(`/${siteId}`);
from our App.js and the issues are resolved!
I want to open the same page but by using two different routes. The issue is when clicking on link 1 and after that click on link 2 my page is not being refreshed, when I print this.$route it shows old route info. How to solve this issue?
Link 1 - http://localhost:8080/test1route
Link 2 - http://localhost:8080/test2route
import TestComponent from '#/Component/TestComponent'
export default [{
path: '/test1route',
component: TestComponent,
children: [{
path: '/',
component: () => import('#/List')
},
{
path: '/test2route',
component: () => import('#/List')
}]
}]
Based on your route definition, the path to Link2 would actually be http://localhost:8080/test1route/test2route, since 'test2route' is a child of 'test1route'.
I am just getting started with Vue. I installed #Vue/Cli (that's version 3) and also cli-init so I can use version 2's commands. To create my project I used vue init webpack .
While running the app on the browser I noticed strange behaviour;
my routes are being changed!
Initial Route "localhost:8080/"
Navigating to the route url changes to "localhost:8080/#/"
Also with another route "localhost:8080/about"
Navigating to this route the url changes to "localhost:8080/about#/"
I don't understand what is going on. It renders the components though, but the url just changes.
Here is my routes config:
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
{
path: '/about',
name: 'AboutComponent',
component: AboutComponent,
},
{
path: '*',
name: '404',
component: HelloWorld,
},
],
});
No router links, I navigated by typing the paths.
My router setting is default.
You can probably answer the question yourself by reading vue-router documentation here (https://router.vuejs.org/guide/essentials/history-mode.html)
By default vue-router works in hash mode. Routes are changed in the browser with a 'hash' for compatibility with old browsers. Nowadays you can safely use history mode, and your URLs won't change in the browser location box.
However, I recommend that you read and fully understand how client-side routing works and what's the required server-side configuration you need to make your app work properly.
Welcome to Vue.JS!