In this chapter, we will introduce Vue.js routing. Vue.js routing allows us to access different content through different URLs. Using Vue.js, we can implement a single-page web application (SPA) with multiple views. Vue.js routing requires loading the (https://github.com/vuejs/vue-router). Chinese documentation: (http://router.vuejs.org/zh-cn/). * * * ## 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 implement a single-page application. **** is a component used to set up a navigation link to switch between different HTML content. The **to** attribute specifies the target address, i.e., the content to be displayed. In the following example, we add vue-router, configure components and route mappings, and then tell vue-router where to render them. The code is as follows: ## HTML Code ## JavaScript Code const Foo = {template: ''}const Bar = {template: ''}const routes = [{path: '/foo', component: Foo}, {path: '/bar', component: Bar}]const router = new VueRouter({routes})const app = new Vue({router}).$mount('#app') [Try it »](#) Clicked navigation links will have the style class ="router-link-exact-active router-link-active" added. * * * ## Related Attributes Next, let's learn more about the attributes of . ### 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. HomeHomeHomeHomeHomeUserRegister ### replace If the `replace` attribute is set, clicking will call `router.replace()` instead of `router.push()`, so no history record will be left after navigation. ### append When the `append` attribute is set, the path is appended to the current (relative) path. For example, if we navigate from `/a` to a relative path `b`, without `append` configured, the path becomes `/b`; if configured, it becomes `/a/b`. ### tag Sometimes you want `` to render as a specific tag, like `

`. We use the `tag` prop to specify which tag to render. It still listens for clicks and triggers navigation. foo

foo

### active-class Sets the CSS class to use when the link is active. It can be overridden with the following code. ._active{ background-color : red; }

Router Link 1 Router Link 2

Note that **class** uses active-class="_active". ### exact-active-class Configures the class to activate when the link is exactly matched. It can be overridden with the following code.

Router Link 1 Router Link 2

### event Declares the event(s) used to trigger navigation. Can be a string or an array of strings. Router Link 1 The code above sets the event to `mouseover`, meaning 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 source code of this example: ( You can also download it from GitHub: [https://github.com/chrisvfritz/vue-2.0-simple-routing-example](https://github.com/chrisvfritz/vue-2.0-simple-routing-example) After downloading, unzip the directory, rename it to `vue-demo`, enter the directory, and execute the following commands: # Install dependencies, using the Taobao resource command cnpm cnpm install # Start the application, address is localhost:8080 cnpm run dev If you need to publish 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: !(#)