Vue Router

I spent some time yesterday going through and finishing the Router section of my Vue course. You can either add to your project as an option during the initial setup of the vue-cli or you could add it afterwards using vue add router. The documentation is very good it's well laid out and has some good examples and use cases for particular aspects and how to use the router.

There is also a course on Vue School I intend to go over for a few things e.g. creating a 404 page or experimenting with transitions for my routes. After installing the router import it into main.js using import Router from 'vue-router' then add Vue.use(Router) and initialise it and add your routes e.g.

const router = new Router({ routes})

In this example there is a routes.js file which is an array of objects and then imported into main.js import { routes } from './routes an example file would be:

export const routes = [
  { path: '/', name: 'Home'},
  { path: '/page2', name: 'Page 2'}
]

Then add <router-view></router-view> into App.vue to match this visible in the Vue instance. The default mode is using hash e.g. localhost:3000/#/ this hash mode is common in SPA as without # it will send a request to the server. To change this you can add mode: history a new Router either in a separate router file or in App.vue e.g.

import Router from "vue-router";
Vue.use(Router);

export default new Router({ mode: "history",});

Navigation using router links

Using <router-link></router-link> has the advantage of having an implicit eventListener added so it will listen to click and will load the correct route instead of the default behaviour of reloading the page sending a server request. You can also trigger the navigation through code as well as router-link e.g.

...methods: { goHome(){ this.$router.push('/') }}...

this method can then be added to the element e.g.button.

Route Parameters

To add dynamic parts of a URL e.g.an id by using colon using params property is an object holding key value pairs in routes.js:... path: '/user/:id... then in your component:

...data(){...id: this.$route.params.id}

Child Routes

To add child routes add the children property e.g.

{ path: '/person', component: Person, 
children: [{ path: '', component: myComp }...]

Named Routes

When creating routes can add a name property to any route (it cna be anything) e.g.

{ path: ':id/edit', name: 'editUser' }

this can then be added to your navigation or wherever it is needed e.g.:to="{ name: 'editUser', params: { id: $route.params.id }}"You can also add these in the code e.g. this.$router.push({ name: 'home' })

Query Parameters

These can setup/added directly in your navigation or use the object syntax e.g. ..to="/?a=1000&locale=en" or :to=...query: { locale: 'en' }To extract these can do this in same way as params but using query e.g.Locale: {{ $route.query.locale }}You can also have multiple router views by naming them e.g.

Then update your routes to include this:

...path: '', name: 'home', components: {
default: Home,
'header': Header
}

Catch All Routes

This is set up through the use of a wildcard e.g.

{ path: *, redirect: '/' }

This will catch any anything not included in your routes.js file and redirect your users back to the homepage.

Guards

AS the name suggests these are used to protect routes. Firstly the beforeEnter guard this can be set up globally for generic checks as it will execute all the time e.g.

router.beforeEach((to, from, next) => {
next() // this needs to be included
})

This can be set on individual routes inside the routes.js setup:

...path: '', component: '', beforeEnter: (to, from, next) => {
next()
}...

It can also be set up in the component like lifecycle hook e.g.

beforeRouteEnter(to, from, next) {
  if(true){
    next()
  } else {
    next(false)
  }
}

It is important to note that this guard does NOT have access to this, because it is called before the route rendering the component in confirmed.

beforeLeave guard needs to be added on a component level.

Lazy Loading

You can setup async functions in route for each component whuch returns a promise and you need to resolve them. This will improve performance e.g.

... const User = resolve => {
   require.ensure(['./components/...'], () => {
     resolve(require('./components/...'))
  })
}

I'm still learning about this and this is me attempting to document as I learn so if anyone has any comments about anything I may have missed or any suggestions I'd love to hear them.