I'm getting started with Durandal JS and so far it's working great.
I have an issue though - ALL my links are being intercepted by Durandal's Router (Sammy JS under the hood). How can I get it to leave my links alone?
If there is a Sammy JS-specific alternative to the hashtag as a href to make the browser think it's a link, that'd be awesome too.
Durandal's router.js is an optional component, so if you don't need it you can remove the script tag that loads sammy.js and remove durandal/plugins/router as dependencies in your AMDs.
If you need to partially protect some links from being handled by router then guardRoute http://durandaljs.com/documentation/Router/ is probably your best bet.
This assumes that you're running Durandal 1.2 and not the latest code from github (work in progress), where router.js just got completely rewritten and has no dependency on sammy.js any longer.
I'm using the following in anchor tags href elements:
href="javascript:void(0);"
and it seems to be working.
Related
I just deployed my Vue app to my website using GitHub Pages.
The website is successfully hosted at https://astroorbis.com.
Here's the problem; When you click the "links" button at the top of the page, it successfully nagivates you to https://astroorbis.com/links, but when you try visiting the URL itself (typing in https://astroorbis.com/links) into your browser, it returns a 404.
There are other links that have the same error, such as /discord, /github, etc.
I tried the solution at Vue Router, GitHub Pages, and Custom Domain Not Working With Routed Links, but it failed as well.
What would be the solution for this?
As stated in this section of the HTML5 mode
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access https://example.com/user/id directly in their browser. Now that's ugly.
Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!
So, the solution would be to use something like that
const routes = [
// will match everything and put it under `$route.params.pathMatch`
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
]
On Netlify, you also need to add the following for it to work
/public/_redirects
/* /index.html 200
So I'm not sure about Github Pages but you should have something similar there, some way of catching all routes and sending them to the index.html of your initial SPA page load.
Otherwise maybe just give a try to Netlify with the _redirects configuration.
Maybe this article could help regarding Github pages.
The hack in your given link seems to be the only viable solution but it's still bad for SEO so yeah, depends if you want any (I guess so).
In that case, you could try Nuxt.js, Gridsome or Vitesse if you want to have some statically generated pages (best approach regarding SEO).
I have a landing page build using Vue 2 with vue router and vue pwa.
When public to production, everything run okay but when i search my web in Google, results show only title page, content in noscript tag as description and when view cached version of my page Google show totally empty page.
But my web on production still run normal, full function and i definitely don't disable Js in browser. I also tried use Google Search Console to request re-index my page but nothing change.
Disable prefetch and preload in vue.config.js resolved my problem.
chainWebpack: config => {
config.plugins.delete('preload')
config.plugins.delete('prefetch')
},
Everything turned on in the server? Just had that happen today anyway what code you using to add the title and description. Looks like something may not be executing when the page loads.
Vue Route can’t read the link when Refresh Browser in hexadecimal
The route is Arabic language in alias and route
Example You can visit sandbox:
jmbz0.csb.app/تواصل
Dependecy
Vue 3
Vue Route 4.0.3
regard
The quick fix Use encodeurl As the answer form #posve vue-route team I open issues link below
The Answer for Encode problem
Document how to use correctly encoded paths
Regards
I have a single page Vue application that uses hash history for the URLs (i.e. https://www.myapp.com/#/sign-up). I have another website that is using Wagtail as a CMS tool that is attempting to link to my vue spa using an anchor tag but it doesn't appear to be working. The website with the anchor tag was built with a pre-made theme using jQuery.
<a class="btn btn-sm btn-primary transition-3d-hover" href="https://www.myapp.com/#/sign-up">
I expect clicking the link will take me to my sign-up page but nothing happens, I see this on the console log when clicking the link:
Uncaught Error: Syntax error, unrecognized expression: #/sign-up
at Function.oe.error (jquery.min.a2530ed98bf8.js:2)
at oe.tokenize (jquery.min.a2530ed98bf8.js:2)
at oe.select (jquery.min.a2530ed98bf8.js:2)
at Function.oe (jquery.min.a2530ed98bf8.js:2)
at Function.e.find (jquery-migrate.min.05689c22f0c8.js:59)
at w.fn.init.find (jquery.min.a2530ed98bf8.js:2)
at e.fn.init.w.fn.init (jquery.min.a2530ed98bf8.js:2)
at new e.fn.init (jquery-migrate.min.05689c22f0c8.js:43)
at w (jquery.min.a2530ed98bf8.js:2)
at HTMLAnchorElement.<anonymous> (scroll-nav.787831ada42e.js:16)
Navigating to the url https://www.myapp.com/#/sign-up does work as expected, just not through clicking the link. I'm relatively new to front-end development and am lost on what could be causing the problem.
I am not that clear about the question and maybe not the best person to answer, but typically you need to configure your server with a URL Rewrite to be able to work with an SPA application, but if that was the issue you wouldn't be able to open that url directly either but you say that you can. So I am not sure what the issue is. I suggest that you take a look at this link also related to configuring the server.
Don't use hashbang navigation as it's deprecated since 2015. Instead use VueRouter to get rid of your hashbang and configure your server-side app to redirect all routes to /, letting Vue handling the routes.
const router = new VueRouter({
mode: 'history'
})
Thanks to Thomas Edwards line of questioning it lead me to the answer:
The website attempting to link to my SPA indeed had some jQuery code on it for autoscrolling behavior where the function was preventing default behavior for all hashed links.
I'm writing custom views for Identity Server 3 for its login, logout, consent, etc. I want to use Aurelia but in Identity server I have to pass in the actual html file. So, how can I navigate to localhost:9000/login.html and not localhost:9000/#login
Thanks
if you want to remove the # from URLs in an aurelia application:
Configuring PushState
Remember that Aurelia is "just JavaScript," so when you want to link to another page on your site, you'll do it the same way you always would, by giving either an absolute or relative path to the file. You're not going to be able to link to an HTML file that is in your bundle though, the file will have to be unbundled, like index.html is.
At this point, this becomes just a standard JavaScript question about building a URL, and not anything to do with Aurelia. So just have the url point to wherever login.html is. I'm hoping this is enough for the answer, if not we can discuss it further.
With #Ashley Grant's help, I was able to create an aurelia replacement for IViewService example coded in angular. Identity Server 3 IView Service Example
It's honestly quite easy. Just create a standard aurelia project and put your html in app.html and view model in app.js. In addition to having the vendor_bundle reference link in your Index.html you will also have to create a link for the app_bundle as well because of a bug that tries to locate app_bundle in the root of your folder structure for Identity Server.
If anyone is interested in the source I can put something together just IM me.