On my project, I'm using React + Next.js. For routes, I use the library next-routes. When you navigate the nested route "{category alias}/filter" the page reloads.
Add route - routes.add ({name: 'products', pattern: '/:noname/filter', page: 'products'})
Link to the route - <Link route="category_alias/filter">Products</ Link>
How to make it work without reloading?
I'm under the impression that you are still using the Link parameter inside the next/link
If that is so, then switch to using the Link object found the file where you export the next-routes
Assuming you have the routes.js file at the root of the project:
Then in a path like pages/test.js
import React from 'react';
import { Link } from '../routes';
export default function() {
return (
<Link route="/category_alias/filter">
<a>Testing the microphone</a>
</Link>
);
}
See https://github.com/fridays/next-routes#on-the-client
Related
I'm using Vue2Editor in my Nuxt app on a single page. Whenever I test the app and navigate to the page from another page on the app, it loads fine without any issues. But when I test and try to open that page directly, the app fails with the following error. I've tried to dynamically import the vue-editor package but that hasn't worked so far. Any ideas how I can make this import work on the page when trying to directly access it?
nuxt.config.js
plugins: [{src: './plugins/vue2-editor', ssr: true}]
plugins/vue2-editor.js
import Vue from 'vue'
if (process.BROWSER_BUILD) {
const VueEditor = require('vue2-editor')
Vue.use(VueEditor)
}
my_page.vue
<template><div><vue-editor></vue-editor></div></template>
<script>
...
import { VueEditor } from 'vue2-editor';
components: {
VueEditor
}
...
</script>
Can you try it wrapping the component to be client side only?
Problem comes that when you access directly to the page you are Server Side Rendering and document doesn't exists on server.
<client-only><vue-editor/></client-only>
If not working try setting the plugin as ssr: false
plugins: [{src: './plugins/vue2-editor', ssr: false}]
You can import locally, on the client with the following
export default {
components: {
[process.browser && 'VueEditor']: () => import('vue2-editor'),
}
}
Rather than having it defined globally (especially if you use it only in a few pages).
Otherwise, wrapping it in between <client-only> tags could be a good idea too.
More detailed answer available here.
i want to show a custom html page while building my vue js project (npm run build)
as you know while building process dist folder not exists and after build process we have dist folder .
how can i show a custom page until build is completely done?
i found this answer in a forum but how can i use that?
i dont think this is proper way!
axios.interceptors.response.use(function (response) {
if ( response.status === 503 ) {
return to maintenance page
}
return response;
});
Hi can you explain what do you want to achieve. It seems you are using VUE version that is lower than VUE CLI 3. If you want a custom page (error page, static page, 404 page, redirection page and etc.) you can still use vue router. Adding a page after a build is not a good idea since there is no route for that when you already build your project. Install vue router, create a router file or if you already have router add this.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import PageNotFound from '#/views/pages/NotFoundPage'
import 404Page from '#/views/pages/404Page.vue'
import StaticPage from '#/views/pages/StaticPage'
const router = new Router({
routes: [
{
path: '/static',
name: 'Static Page',
component: StaticPage
},
{
path: '/404',
name: '404 Page',
component: 404Page
},
{
path: '*',
name: 'PageNotFound',
component: PageNotFound
}
]
})
export default router
You just need to redirect the user using these from your view files
this.$router.push('/static')
this.$router.push('/404')
if there are no matching route the user will automatically redirected to Page Not Found page
I am working on a Vuepress project which was setup by a former colleague. I am trying to refer my custom Javascript file in a root component so that it is globally available. I don't want to refer to it in every component, because that would be redundant and it does not work as expected.
I read enhanceApp.js is the way to go so I tried attaching the JS file to Vue Object but it does not work. Any help is appreciated!
This is enhanceApp.js
import HelpersPlugin from '../../src/js/helpers';
export default ({
Vue,
options,
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(HelpersPlugin);
}
this is src/js/helpers folder which contains, accordion.js (My custom JS file) and index.js
index.js:
import AccordionHelper from './accordion';
export default {
install: (Vue, options) => {
Vue.prototype.$helpers = {
accordion: AccordionHelper
}
}
}
accordion.js: (has plain JS with DOM manipulation functions)
export default () => {
console.log("Hello");
//DOM manipulation JS
}
This is the folder structure:
docs
-> .vuepress
- components
* Accordion.vue
* Buttons.vue
- theme
* Layout.vue
* SearchBox.vue
- config.js
- enhanceApp.js
-> accordion
- README.md
-> buttons
- README.md
src
-> js
- helpers
* accordion.js
* index.js
I am looking to use accordion.js in both Accordion.vue and Layout.vue without having to refer it in both components.
I believe this is the recommended way of sharing common JS functions.
Found this by ejecting the default theme from Vuepress.
.vue File:
<template>
<div v-if="canHelp()">Help is on the way</div>
</template>
<script>
import { canHelp } from './helpers'
export default {
methods: {
canHelp
}
}
</script>
helpers.js
export function canHelp () {
return true
}
I have an Aurelia project with navigation in app.html and app.js. The project includes a home page that has a different style to it, including navigation that is different than the non-home page views.
I would like to turn off navigation for the home view so I tried setting a variable (showMenu) to toggle the visibility. In fact, I am able to use jQuery to do this, but I wonder if there is an Aurelia way of doing it. If I set this.showMenu to true it shows the menu container, and false hides it. Like this for example:
app.html
<div class="container" if.bind="showMenu">
app.js
constructor(router){
this.router = router;
this.showMenu = true;
...other things
}
What I would like to do is set showMenu to false from home.js. I tried this (among 20 or so other attempts), but it does not work.
home.js
activate() {
this.showMenu = false;
}
Is there a way through $parent or some other means to hide the menu in app.html using a view model?
EDIT
This works but it feels a little like a hack.
home.js
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
#inject(Router)
export class Home {
constructor(router) {
this.router = router;
}
attached(){
$("#navbarMenu").hide();
this.router.refreshNavigation();
}
}
You should be able to use router to achieve that. Since this is required for one page only, you can have something like this assuming your route name is home (or you could use other properties of RouteConfig that you have set in configureRouter):
<div class="container" if.bind="router.currentInstruction.config.name !== 'home'">
I approach this problem by using separate shells. By default Aurelia will start your app with app.js (or ts). But you can change that default and also use the same command to redirect to a new shell after authentication.
In your main.ts (or .js) you will have a line to start your aurelia app:
aurelia.start().then(() => aurelia.setRoot());
This line is telling aurelia to start and to set the root view model for your app, when aurelia.setRoot() has no value given it defaults to app.ts (or .js).
So I create a landing for my app where I can display with the page and styles I wish completely separately from the main app, including a limited router and navigation.
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
if (environment.debug) {
aurelia.use.developmentLogging();
}
if (environment.testing) {
aurelia.use.plugin('aurelia-testing');
}
aurelia.start().then(() => aurelia.setRoot('authPage'));
}
authPage.ts is my usual app.ts with a router configuration but it will only have the authPage configured in it and perhaps one or two other welcome pages.
The authPage takes care of authentication and obtaining appropriate tokens. I use a 3rd party for authentication services so all I have on this page is a link. Either way after successful authentication is confirmed you now just want to redirect to an alternative aurelia shell.
#autoinject
export class AuthPage {
private app : Aurelia;
private router : Router;
constructor(router : Router, app: Aurelia) {
this.app = app;
this.router = router;
}
authenticate {
//some kind of authentication procedure...
if(authenticationSuccess) {
this.router.navigate('/', { replace: true, trigger: false});
this.router.reset();
this.router.("authenticatedApp");
}
}
The lines this.router.navigate('/', { replace: true, trigger: false}); and this.router.reset(); are provided to deal with issues mentioned here and also on SO here. The shell switch line this.router.("authenticatedApp"); doesn't work for me without the other two.
My authenticatedApp configures a full router and navigation menu for the user in just the same way as you would normally do with app.ts but now separated into its own shell.
Of course there is nothing to prevent someone linking straight to authenticatedApp but at this point there is no data displayed without an api call which all require an access token to be presented.
This is a useful link on building an Aurelia app with multiple shells for authentication.
The end result is a separated landing pages and application pages which can have different styles and different navigation.On logout you can do the same thing in reverse to reload the auth page.
I've tried a few different recommendations, however, none seem to work. I'm using react router V4 and I would like to create a link that navigates to an external website. Currently, everything I do just appends to my URL.
What I want to happen
www.mysite.com => click internal link and go to => www.newsite.com
What is happening
www.mysite.com => click internal link and go to new page but it appends => www.mysite.com/www.newsite.com
<Link to="http://www.newsite.com">Go to new site</Link>
The solution to this was what #Giri suggested, a simple HTML link.
New site
You can also create your own component as suggested here:
import React from 'react'
import {Link} from 'react-router-dom'
const Anchor = (props) => {
return props.href ?
<a {...props}/>
:
<Link {...props}/>
};
export default Anchor