vue projects router routing configuration

Introduction

Routing: control jumps between components, the request will not be achieved without a page refresh, jump directly - Switch Components "" "

 

installation

Local environmental installation routing plug-vue-router: cnpm install vue-router --save-dev  

 

Configuration

Method two configurations: in the main.js || in index.js src / router folder in

Just say here that in src / router / index.js in

Introduction:

Import View from 'view' 
Import from Router 'order-routing'

Note that this Router is a custom name, that name after here, to be used below

Use / registration:

Vue.use(Router)

Configuring Routing:

Export default  new new Router ({ 
  routes: [ 
   { 
        path: ' /', // the address column shows the time of the path
         name: 'Home', 
        Component: Home    // Home a component name, the route corresponding to the jump to Note that there is no added component assembly .. "S." 
    }, 
    { 
        path: ' / Content',
         name: 'the Content', 
        component: the Content 
    } 
], 
    MODE: "History" 
})

Introducing component address corresponding to the route:

import Home from '@/components/Home' 
import Home from '@/components/Content’

Call index.js configuration in main.js in: 

import router from './router'

App.vue page using the (show) Route:

Put into the corresponding position label:  

<router-view></router-view>

Routing switch (the original <a href="XXX.html"> other places): Label and link into the switch:

< Router-Link   to = "/" > switch assembly to Home </ Router-Link > 
< Router-Link   to = "/ Content" > Switch to Content component </ Router-Link >

When the parameters and configuration to the inside, as a path to path