Table of Contents

• <router-link>
• <router-view>
• history mode
• Matching
• The Route object
• Route Meta Fields
• Navigation Guards
• Passing Props
• Programmatic Navigation

<router-link>

Is preferred over <a href="...">

<!-- literal string -->
<router-link to="home">Home</router-link>
<!-- renders to -->
<a href="home">Home</a>

<!-- javascript expression using `v-bind` -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- Omitting `v-bind` is fine, just as binding any other prop -->
<router-link :to="'home'">Home</router-link>

<!-- same as above -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

<router-view>

• A functional component that renders the matched component for the given path.
• Can use mutliple routes by named-views
• Use :key to force rerender when the path is changed

<router-view :key="$route.fullPath"></router-view>

history mode

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser.

Matching

pathToRegexp('/:foo/:bar?')
pathToRegexp('/:foo*')
pathToRegexp('/:foo+')

Sometimes the same URL may be matched by multiple routes. In such a case the matching priority is determined by the order of route definition: the earlier a route is defined, the higher priority it gets.

The Route object

// For pattern '/:user', '/yeonghoey?test=no"
$route.params.user === 'yeonghoey';
$route.query.test === 'no';

Route Meta Fields

Navigation Guards

Passing Props

When props is set to true, the route.params will be set as the component props.

Programmatic Navigation