How to structure router.js file in VueJs? - javascript

I want to structure my router.js file as currently there is around 500 lines of code in it.
{
path: "/",
component: () => import("./../src/views/dashboard/Dashboard.vue"),
meta: {
auth: true,
title: "Dashboard"
}
},
{
path: "/regionWiseDashboard",
component: () => import("./../src/views/dashboard/RegionWiseDashboard.vue"),
meta: {
auth: true,
title: "Dashboard"
}
},
The above code is repeating for every component I include in my project which just makes the code look more and more unreadable. Can I structure it anyhow? Maybe put all files in an JSON or divide the main js file into children js files?

How I structured my routes in vue.
First: create a folder named routes, inside this folder, create subfolders depends on how you group your routes. Example, villages, dashboard, user
Second: create a main route inside your routes folder. This main route will hold and import all your routes made in villages, dashboard, user.
last: import this main route to your main app.js

Related

Dynamic route generation in NextJS 12

I have a JS object like so
[
{
name: 'About',
path: '/about'
},
{
name: 'Profile',
path: '/profile'
},
{
name: 'Users',
path: '/users'
}
]
Is there any way for me to link the paths in this object to the pages I have in my pages folder
I tried using the Link component and passing it as prop. This handles the navigation but when the page is refreshed it redirects to the 404 page
Go into your next.config.js file and add this:
module.exports = {
trailingSlash: true,
}
That should fix this issue of 404 when refreshing. As for passing a prop to Link component, that's fine as it is.
Here's a next.js explanation as reference.

Problem with Voyager admin panel routing and Vue js router in laravel

I`m developing locally SPA application using Vuejs V2 in Laravel V8 framework.
My routes/web.php file have this codes:
Route::group(['prefix' => 'admin'], function () {
Voyager::routes();
});
//for disallow accessing route from anywhere alse than api
Route::get('/{any?}', function () {
return view('welcome');
})->where('any', '^(?!api\/)[\/\w\.\,-]*');
Auth::routes();
Here is my routes.js file inside resources/js folder
import VueRouter from "vue-router";
const routes = [
{
path: "*",
component: require("./components/PageNotFound").default,
name: "PageNotFound"
},
{
path: "/",
component: require("./components/Home").default,
name: "home"
},
// other routes
];
const router = new VueRouter({
mode: "history",
linkActiveClass: "active",
routes
});
export default router;
My problem is that i cant access Voyager http://127.0.0.1:8000/admin route in browser and redirects me to home page!
My Voyager installed successfully and before installing that i was developing frontend features so i have a lot routes in my routes.js file.
My question is how i can except Voyager admin group route in web.php or any other solutions maybe?!
I solved the problem by stopping serve then start that, worked for me and i can now see admin panel.

VueJS Routing/Navigation issues

Having trouble using VueJS (first time using it)
I have 90% of my page template in the index.html file in doc root
I have 3 components (each contains the main content body for each 'page')
My router:
export default new Router({
mode: 'history',
hash: false,
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/gallery',
name: 'Gallery',
component: Gallery
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
]
})
I can't get <router-link :to="{ name: 'Gallery' }">Gallery</router-link> to work - my site doesn't render them as anchor tags in my index.html (I'm probably not understanding how/where Vue can be used there) - so I'm using a standard link e.g. <a class="nav-link" href="/gallery">Gallery</a>
The problem:
While all of this code works fine on my local machine, it doesn't work anywhere that I upload my code to (I would like to have it working on Netlify). Netlify and other sites overwrite my attempts to remove the hash, so my links then link to e.g.
https://examplesite.com/#/ => https://examplesite.com/gallery#/
hash is not a Router option. Try removing this.
To use history mode on Netlify, you have to add a _redirects file to your public directory.
Add this to the file:
/* / 200
This will make sure that all paths are handled by the vue-router

Dynamic import splits code but doesn't lazy load

I want to introduce lazy loading to Vue Router, so that some parts of the code will be loaded only on demand.
I'm following the official documentation for Lazy Loading in Vue Router:
https://router.vuejs.org/en/advanced/lazy-loading.html
So for a test I've changed how the Vault module is imported in my router file:
import Vue from 'vue';
import Router from 'vue-router';
// Containers
import Full from '#/containers/Full';
// Views
// TODO: views should be imported dynamically
import Dashboard from '#/views/Dashboard';
const Vault = () => import('#/views/Vault');
import Page404 from '#/views/Page404';
import Page500 from '#/views/Page500';
import Login from '#/views/Login';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
redirect: '/dashboard',
name: 'VENE',
component: Full,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: Dashboard
},
{
path: 'vault',
name: 'vault',
component: Vault
},
],
},
{
path: '/login',
name: 'Login',
component: Login,
},
{
path: '/404',
name: 'Page404',
component: Page404,
},
{
path: '/500',
name: 'Page500',
component: Page500,
},
],
});
All fine, however, when I open the app for the first time, the extracted bundle which was supposed to be lazy loaded, is loaded up front:
When I go to that view using router it appears in Dev Tools Network Tab again, but says it's loaded from the disk, so the bundle is clearly loaded on first page load, which is totally against the idea of lazy loading.
This is occurring for a couple reasons. I should say, you've set everything up correctly for lazy-loading the Vault component. One tip, I've found it helpful to add the webpack chunk name to the dynamic import:
const Vault = () => import(/* webpackChunkName: "vault" */ '#/views/Vault')
This would then show up in your network tab named with the chunkName "vault"
First, I'm guessing that you're using #vue-cli looking at your file structure and /src alias. Depending on the options you select when creating your project, #vue-cli uses a webpack config for progressive web apps that prefetches all resources. While the browser has mechanisms for prioritizing these downloads, I've found that some of the prefetching appears to block other resources. The benefit of prefetching is for browsers that don't support service-workers, you use idle browser time to put resources in the browser cache that the user will probably eventually use. When the user does need that resource, it is already cached and ready to go.
Second, you do have options for disabling the prefetch plugin. #vue-cli provides escape hatches for overriding the default config. Simply edit or add vue.config.js to the root of your project.
courtesy #LinusBorg
// vue.config.js
chainWebpack: (config) => {
// A, remove the plugin
config.plugins.delete('prefetch')
// or:
// B. Alter settings:
config.plugin('prefetch').tap(options => {
options.fileBlackList.push([/myasyncRoute(.)+?\.js$/])
return options
})
}
-- Be sure to only use either option A or option B; not both. --
Source: https://github.com/vuejs/vue-cli/issues/979
I've used option A with success, but you should definitely benchmark the results yourself and go with the option that best serves your users and application.
I appreciate the configurability of #vue-cli for these and many scenarios. It's definitely worth exploring to write the application you want, rather than coercing your app to the config.

Controller/route conventions for nested routes in ember

I have this resource with a nested route in my ember app:
router.js:
Router.map(function() {
this.resource('posts', function () {
this.route('show', {path: '/:id'});
});
});
What is the convention in ember for my controllers? Do I create a separate file for each URL, or does the show handler go in /controllers/posts.js? Or is there perhaps multiple correct ways of doing this?
This is what I have so far in /routes/posts.js:
import Ember from 'ember';
var PostsRoute = Ember.Route.extend({
model: function() {
return posts;
}
});
var posts = [
{
id: '1',
title: 'Object nr one',
content: 'This is the content of Object nr one.'
},
{
id: '2',
title: 'Obelix',
content: 'A fat gaul. From a comic book.'
},
{
id: '3',
title: 'Werner',
content: 'Wat soek werner hier? Dis mos nou belaglik man.'
}
];
export default PostsRoute;
And this is /controllers/posts.js:
import Ember from "ember";
export default Ember.ArrayController.extend({});
I would appreciate if someone showed me the correct way of doing things in this example.. I'm really struggling to find proper examples on the web.
Please note that I'm using ember CLI
"Show handler" never goes to controller file, it's rather a Route. You create separate route, controller, template for each of your resource or route directives. You can tell controller that it should have the same behaviour as other controller, or use a mixin. For example:
router.coffee:
#resource 'training', ->
#route 'chest'
#route 'shoulders'
Means you need following structure:
app/routes/training[your parent resource]/chest.js[your child route]
app/routes/training/shoulders.js
If you need controller for each of this routes you would need files with following paths:
app/controllers/training/chest.js
app/controllers/training/shoulders.js
And templates:
app/templates/training/chest.js
app/templates/training/shoulders.js
It's because I've defined training as resource(parent) and routes as its children.
If you use Ember CLI you can use commands like:
ember g controller training/shoulders
or:
ember g route training/shoulders
Last command will generate you: Route, template and entry in router.js. You can use this commands so you won't have worry too much about your directory structure.
However, it's important to remember that when you define resource inside a resource - child resource isn't really a child and it shouldn't be placed inside parent resource directory. For example:
#resource 'tracks', ->
#resource 'track', path: '/track/:track_id', ->
#route 'edit'
Means you need 2 directories to store route files:
app/routes/tracks/
index.js
app/routes/track/
edit.js
Instead of app/routes/tracks/track/edit.
So, in your example, for following router:
Router.map(function() {
this.resource('posts', function () {
this.route('show', {path: '/:id'});
});
});
app/routes should look like this:
app/routes:
- posts.js # main route for whole resource
- posts/ # directory which contains files for routes inside posts resource
- show.js # posts/show route

Categories