Vue.js Routing

In this chapter, we will introduce Vue.js routing.

Vue.js routing allows us to access different content through different URLs.

With Vue.js, you can implement multi-view single-page web applications (SPA).

Vue.js routing requires loading thevue-router library

Chinese documentation URL: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 implement single-page applications.

<router-link>It is a component used to set up a navigation link and switch between different HTML content.toThe `to` prop is the target address, that is, the content to be displayed.

In the following example, we add vue-router, then configure the 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 to navigate.--> <!--Specify the link by passing the `to` prop.--> <!--<router-link> is 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> <!--Router outlet--> <!--The component matched by the route will be rendered here.--> <router-view></router-view> </div>

JavaScript Code

//0. If using modular programming, import Vue and VueRouter, and call Vue.use(VueRouter) //1. Define (route) components. //They 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` config //You can also pass other configuration parameters, but let's keep it simple for now. const router = new VueRouter({ routes //(shorthand) equivalent to routes: routes }) //4. Create and mount the root instance. //Remember to inject the router via the router configuration parameter, //so that the entire application has routing functionality. const app = new Vue({ router }).$mount('#app') //Now, the application has started!

Try it »

Clicked navigation links will have styles added.class ="router-link-exact-active router-link-active"。

<router-link> Related Props

Next, we can learn more about the props of <router-link>.

to

`to` represents the link to the target route. When clicked, its value will be immediately passed to router.push(), so this value can be a string or an object describing the target location.

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home.html">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

If the replace prop is set, when clicked, router.replace() will be called instead of router.push(), and no history record will be left after navigation.

<router-link :to="{ path: '/abc'}" replace></router-link>

append

When the append prop is set, its path is prepended to the current (relative) path. For example, if we navigate from /a to a relative path b, without configuring append, the path will be /b; if configured, it will be /a/b.

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

Sometimes you want<router-link>to render as a certain tag, such as<li>. So we usetagthe `tag` prop to specify which tag, and it will still listen for clicks and trigger navigation.

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

Sets the CSS class name used when the link is active. It can be replaced by 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 hereclassuseactive-class="_active"。

exact-active-class

Configure the class that should be activated when the link is exactly matched. It can be replaced by 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 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 event to mouseover, so when the mouse moves over Router Link 1, the navigated HTML content changes.

NPM Routing Example

Next, we demonstrate a simple routing example using npm. Before starting, please download the source code of the example:

Routing Example

You can also download it on GitHub:https://github.com/chrisvfritz/vue-2.0-simple-routing-example

After downloading, extract the directory, rename it to vue-demo, and enter the directory, then execute the following commands:

# 安装依赖，使用淘宝资源命令 cnpm
cnpm install

# 启动应用，地址为 localhost:8080
cnpm run dev

If you need to publish to a production environment, you can execute the following commands:

cnpm run build

After successful execution, visit http://localhost:8080 to see the following interface:

Other Extensions