Routing

In this section of the tutorial we'll look at handling routing and using routes to reduce application load time.

Configure Site Root Subfolder

If you are viewing this app via the live demo on Github, you will notice the domain name and subfolder: https://www.prograhammer.com/vue-example-project. The "vue-example-project" part of the URL must be configured in a few places. You'll need to update these places with your own subfolder (or "/" if at the root of your domain name):

Router Base

Update the base of your router:

src/router/index.js

// ...

/**
* The Router instance containing all the routes for the application.
*/
const router = new Router({
  base: '/vue-example-project',  # <-- update here
  mode: 'history',
  routes: routes.map(route => ({
    name: route.name,
    path: route.path,
    component: route.component,
    beforeEnter: route.isPublic ? null : guardRoute
  }))
})

Build Config AssetsPublicPath

Update your build config's assetsPublicPath:

build/config/index.js

// ...

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/vue-example-project/',  # <-- update here

Dev Config Proxy Work-Around

We also need to simulate the sub-folder when we run the dev server. Unfortunately we can't just update the assetsPublicPath here. So as a work-around we can just add another proxy rule:

build/config/index.js

// ...

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/vue-example-project/*': {                    # <-- proxy rule added
        target: 'http://localhost:[port]/',
        pathRewrite: { '^/vue-example-project': '' },
    },