Vue.js routing

In this chapter we will introduce you to Vue.js routing.

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

Multiple view single page web applications (SPA) can be implemented through Vue.js.

Vue.js routing needs to load vue-router library

Chinese document address: vue-router documentation.


1, direct download / CDN

  https  :   // unpkg .com/vue-router/dist/vue-router.js


Recommended to use Taobao image:

  cnpm install vue   -   router 

Simple instance

Vue.js + vue-router makes it easy to implement single-page applications.

<router-link> is a component that sets up a navigation link to switch between different HTML content. The to attribute is the destination address, which is what you want to display.

In the following example we add vue-router, then configure the components and route maps, and tell vue-router where to render them. The code looks like this:

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> & lt; -! using the router-link assembly to navigate --> & lt; -!. `to` by passing attribute specifies a link --> <!-- <router-link> will be rendered as a `<a> ` Tags--> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- Routing Exit- -> <!-- The components to which the route is matched will be rendered here--> <router-view></router-viewJavaScript Code
// 0. If you are programming with a modular mechanism, import Vue and VueRouter, call Vue.use(VueRouter) // 1. Define (route) components. // Can import from other files const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. Defining routes // Each route should map a component. Where "component" can be // a component builder created with 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 a router instance and pass the `routes` configuration // You can also pass the configuration parameters, but it's as simple as that. const router = new VueRouter({ routes // (abbreviation) equivalent routes: routes }) // 4. Create and mount a root instance. // Remember to inject routing through the router configuration parameters. // So that the entire application has routing capabilities const app = new Vue({ router }).$mount('#app') // The app is now up!

Clicked navigation links will be styled class ="router-link-exact-active router-link-active"

welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.