CODEWITHSUNDEEP
vue.js
Akshdeep Singh
Akshdeep Singh

Reputation: 1447

How to set paths for multi-page-applications when using vue?

I want to build a web-application using Vue which should have a website structure like this:

index-page
  |--page1
  |--page2
  |--page3
  ...

That is, I have 1 index-page that will be my home-page which contains the link for all other pages.

But, each page is from some category and a sub-category, so I want that the address for each page should be like this:

localhost:8080/category/sub-category/page
example: localhost:8080/algorithms/sorting/bubble

In my project structure, these categories and sub-categories are placed like this:

my-project/src/category/sub-category/page/files

my-project
  |--src
     |--App.vue    // for index page
     |--main.js    // for index page
     |--algorithms
     |  |--sorting
     |  |  |--bubble
     |  |  |  |--bubble.html
     |  |  |  |--App.vue
     |  |  |  |--main.js
     |  |  |  
     |  |  |--selection
     |  |  |  |--selection.html
     |  |  |  |--App.vue
     |  |  |  |--main.js
     |  |  ...
     |  ...
     ...

These categories and sub-categories are placed on index page like this:

<h2>category</h2>
  <h3>sub-category</h3>
  <ul>
    <li><a href="#">page</a></li>
    ...
  </ul>
  ...
...

I want that any address of the form

localhost:8080/category
or
localhost:8080/category/sub-category

should lead to index page and addresses of the form

localhost:8080/category/sub-category/page

should load the corresponding page.

So, how should I configure my vue.config.js file? Can I do it only once for all pages like given here for my project structure? I only want that my website is working correctly and is developed in the correct way (without using any hacks). Every page is independent of each other. But each page on its own should be a SPA.

Also, I want to know how these all things are related to each other in vue.config.js:

I am asking above question because I have doubt whether the path user sees is same as the path in the project?

Well, since I am using no directory named pages, does that make a difference?

Upvotes: 0

Views: 178

Answers (2)

Akshdeep Singh
Akshdeep Singh

Reputation: 1447

nuxt.js was what I needed. The pages directory handles it all.

Upvotes: 1

HenrijsS
HenrijsS

Reputation: 674

Well. Personally I was building a Vue app with laravel and what I used and mostly a lot of people use is a Vue router.

https://router.vuejs.org/

You can define the links there and it stops the page from reloading and supports transitions for pages. And uses a specific Vue Router href. Hope this somewhat answers your question.

Upvotes: 1

Related Questions