Vue.js Routing
In this section, we will introduce Vue.js routing.
Vue.js routing allows us to access different content through different URLs.
Vue.js enables the creation of multi-view single-page web applications (SPA).
Vue.js routing requires the inclusion of the vue-router library.
Chinese documentation address: vue-router documentation.
Installation
1. Direct Download / CDN
https://unpkg.com/vue-router/dist/vue-router.js
NPM
It is recommended to use the Taobao mirror:
cnpm install vue-router
Simple Example
Vue.js + vue-router can easily create a single-page application.
<router-link> is a component used to set up a navigation link to switch between different HTML content. The to attribute is the target address, which is the content to be displayed.
In the following example, we will add vue-router, configure components and route mappings, and then tell vue-router where to render them. The code is as follows:
HTML Code
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- Use the router-link component for navigation. -->
<!-- Pass the `to` attribute to specify the link. -->
<!-- <router-link> will be rendered as an `<a>` tag by default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- Route outlet -->
<!-- Components matched by the route will be rendered here -->
<router-view></router-view>
</div>
JavaScript Code
// 0. If using modular mechanism programming, import Vue and VueRouter, and call Vue.use(VueRouter)
// 1. Define (route) components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. Define routes
// Each route should map to a component. The "component" can be
// a component constructor created via Vue.extend(),
// or just a component configuration object.
// We will discuss nested routes later.
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. Create the router instance and pass the `routes` configuration
// You can also pass other configuration parameters, but let's keep it simple for now.
const router = new VueRouter({
routes // shorthand for routes: routes
})
// 4. Create and mount the root instance.
// Remember to inject the router with the router configuration
// to make the entire application route-aware
const app = new Vue({
router
}).$mount('#app')
// Now, the application is up and running!
Nav links that have been clicked will have the style class="router-link-exact-active router-link-active".
<router-link> Related Attributes
Next, we can learn more about the attributes of <router-link>.
to
Represents the link to the target route. When clicked, the value of to is immediately passed to router.push(), so this value can be a string or an object describing the target location.
<!-- String -->
<router-link to="home">Home</router-link>
<!-- Rendered result -->
<a href="home">Home</a>
<!-- Using v-bind for JS expressions -->
```html
<router-link v-bind:to="'home'">Home</router-link>
<!-- You can omit v-bind, just like binding other attributes -->
<router-link :to="'home'">Home</router-link>
<!-- The same applies here -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- Named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- With query parameters, the result is /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
replace
Setting the replace attribute will call router.replace() instead of router.push() when clicked, and it will not leave a history record.
<router-link :to="{ path: '/abc'}" replace></router-link>
append
Setting the append attribute will prepend the path to the current (relative) path. For example, navigating from /a to a relative path b without append will result in /b, and with append, it will result in /a/b.
<router-link :to="{ path: 'relative/path'}" append></router-link>
tag
Sometimes you want the <router-link> to render as a specific tag, such as <li>. You can specify the tag type using the tag prop, and it will still listen for clicks and trigger navigation.
<router-link to="/foo" tag="li">foo</router-link>
<!-- Rendered result -->
<li>foo</li>
active-class
Sets the CSS class name to be used when the link is active. You can replace it with the following code:
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
Note that class is used with active-class="_active".
exact-active-class
Configures the class to be activated when the link is exactly matched. You can replace it with the following code:
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
event
Declares the event(s) that can be used to trigger navigation. It can be a string or an array of strings.
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>
The above code sets the event to mouseover, so the HTML content will change when the mouse moves over Router Link 1.
NPM Routing Example
Next, we demonstrate a simple routing example using npm. Before starting, please download the example source code:
You can also download it from Github: https://github.com/chrisvfritz/vue-2.0-simple-routing-example
After downloading, unzip the directory, rename it to vue-demo, and enter the directory. Execute the following command:
# Install dependencies using Taobao's resource command cnpm
cnpm install
# Start the application, accessible at localhost:8080
cnpm run dev
If you need to deploy to a production environment, you can execute the following command:
cnpm run build
After successful execution, visit http://localhost:8080 to see the following interface: