Can I have multiple SPAs in the same app or use history and hash routing in the same app?

2
votes

I'm building an app and want multiple Vue instances in different pages of my website!

Is there a way to use History routing and "hash" routing within the same app so I can have URLs like this.

www.mysite.com/blog/seo-friendly-content
www.mysite.com/blog/google-can-see-this
www.mysite.com/#/something-cool/state-preserved
www.mysite.com/#/cool-but-not-indexed

One part of my application needs to serve SEO friendly content, and one section has a lot of dynamic content. I don't want to force the user to make another server request to load an entirely different page on the "SPA" part of the application!

I guess I could serve static HTML pages that I create manually, but I would like to if possible to use the Vue router to handle the routing!

I couldn't find anything in the Vue.js documentation about this. Anybody that has done something like this?

1
vue.jsvuejs2vue-router

1 Answers

1
votes

If you have multiple root Vue instances, then you cannot have a single router instance. At a fundamental level, your application needs route splitting at a server level. It means your client-server router cannot solve this problem alone.

What you essentially need is SSR.

With SSR, your first page (whichever the user visits first) will be pre-rendered by the server. Then anytime, a user navigates to another page, it won't be full page refresh. It will be handled by your client-side router.

It is the year 2018 and I strongly suggest that you use HTML5 routing and not hash based routing.

Also, consider using micro-frontends if your application is very big and has distinct role-based views.