Routing
In this section of the tutorial we'll look at handling routing and using routes to reduce application load time.
If you are viewing this app via the live demo on Github, you will notice the domain name and subfolder: https://vue.pizza/app. The "/app" 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):
Update the base of your router:
src/http/router.js
// ...
/**
* The Router instance containing all the routes for the application.
*/
const router = new Router({
base: '/app', // <-- update here
mode: 'history',
routes: routes.map(route => ({
name: route.name,
path: route.path,
component: route.component,
beforeEnter: route.isPublic ? null : guardRoute
}))
})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: '/app/', // <-- update hereVueRouter was installed from the VueCli PWA template, however, if you want to install it manually you can with:
$ npm install vue-router --save-devLet's create a file that will export a new Router instance and also setup a route guard for authenticated routes:
src/http/router.js
import Vue from 'vue';
import Router from 'vue-router';
import routes from './routes';
Vue.use(Router)
/**
* Guard the route from unauthorized users.
*
* @param {Route} to The route we want to access.
* @param {Route} from The route from which we are coming from.
* @param {Function} next Callback for passing a route to be called next.
* @return {void}
*/
function guardRoute (to, from, next) {
// work-around to get to the Vuex store (as of Vue 2.0)
const auth = router.app.$options.store.state.auth
if (!auth.isLoggedIn) {
next({path: '/login', query: { redirect: to.fullPath }})
} else {
next()
}
}
/**
* The Router instance containing all the routes for the application.
*/
const router = new Router({
base: '/app',
mode: 'hash',
routes: routes.map(route => ({
name: route.name,
path: route.path,
component: route.component,
beforeEnter: route.isPublic ? null : guardRoute
}))
})
export default router Now the routes:
src/http/routes.js
/**
* Every route becomes a chunk, loaded only when used.
* Reduces size of initial App load.
*/
const routes = [
{
name: 'login',
path: '/login',
component: () => import(/* webpackChunkName: "login" */ '@/features/login/main.vue'),
title: 'Login',
layout: 'NoAuthLayout',
isPublic: true
},
{
name: 'dashboard',
path: '/',
component: () => import(/* webpackChunkName: "dashboard" */ '@/features/dashboard/main.vue'),
title: 'Dashboard',
layout: 'DefaultLayout',
isPublic: false
},
{
name: 'account',
path: '/account',
component: () => import(/* webpackChunkName: "account" */ '@/features/account/main.vue'),
title: 'Account',
layout: 'DefaultLayout',
isPublic: false
}
]With Webpack 3 we can give names to the chunks created from the routes:
build/webpack.prod.conf.js
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
},