Vue+webpack Building Single page router application (ii) __web

nested routines are created by

In fact, it is very simple, mainly vue2.0 some changes.
So to see more API documents, less to see the online tutorial = = Configure Routing

Configure routing, where two sub routes are configured for home news and message

Const ROUTES = [{
    path: '/hello ',
    Component:hello
}, {
    path: '/home ',
    component:home,
    Children: [{
        path: ' News ',
        component:news
    }, {
        path: ' message ',
        component:message
    }]
}, {
    path: '/about ',
    component:about
}];

use of Routes

Written in the Home.vue, in fact, like App.vue.

<template>
    <div>
    <div>
        
 
Effect Preview 
/home


After clicking on the message, it appears in the home Router-view

named Routes

Sometimes feel that in

<router-link  to= "/home/news" >News</router-link>
 
To write a lot of "/home/news" in the long route is really troublesome, then the solution came
By specifying a route name, such as name: ' Detail '
Then it's time to visit.

"
<router-link  to="/home/news/detail/">News</router-link>
 
When you can write

<router-link  to= "Detail" >News</router-link>
 
Dynamic Routing 
Dynamic routing is when you visit a page with parameters behind it
such as a visit to http://localhost:8080/#/Home/news/detail/03
The next 03 is the following argument.
We want to be able to get this parameter on the Detail page, Vue-router gives us a good way.
Params.id can be obtained by $route.

So how does this ID pass through, look at the code

<template>
<div>
    <ul>
        <li v-for= "News in Newslist" >
            <router-link:to= "{ Name: ' Detail ', params: {id:news.id}} ' >{{news.title}}</router-link>
        </li>
    </ul>
    <div>
        <router-view></router-view>
    </div>
</div>
</template >

<script>    
    export default{
        data:function () {return
            {
                newslist: [
                    {id: ' 01 ', Title: ' News '},
                    {id: ' ', title: ' News '},
                    {id: ' ', title: ' News '}}
        }
    }
  
   </script>
  
 
Right here, the routing path and parameters are specified params
Previously written in the Rooter-link to is written dead, so do not need dynamic binding, here to the previous written: to, the same as binding value

   <router-link:to= ' {name: ' detail ', params: {id:news.id}} ' >{{news.title}}</router-link>
 
And look at the official instructions.


 
 
 
  
 
   
 
    
declaration Type
 
    
Programming Type
 
   
 
  
 
 
  
 
   
 
    
Router-link:to= "..."
 
    
Router.push (...)
 
   
 
  
 

 
 
To actually is Router.push's grammatical sugar

Router.push provides the following methods:

String
router.push (' home ')

//Object
Router.push ({path: ' Home '})

//named routing
router.push ({name: ' user ' , params: {userid:123}})

//With query parameters, becomes/register?plan=private
router.push ({path: ' register ', query: {plan: ' PR Ivate '}})
 
Well, if you don't say more, look at the effect.

This is Newsdetail file.

<template>
    <div>
        News Detail-{{$route. params.id}}} ...
    </div>
</template>
 
Run effect

The parameters we passed in were successfully displayed.

Routing can also configure query parameters

<a v-link= ' {name: ' detail ', params: {id:news.id}, query: {A: ' xyz '}} ' >{{News.title}}</a>
 
We wrote a module in App.vue to display the current path, parameters, routing names, query objects

<div class= "Row" >
      <div class= "Col-xs-offset-2 col-xs-8" >
        <div class= "OK" >
          <p > Current path: <code>{{$route .path}}</code></p>
          <p> current parameter: <code>{{$route. Params | json }}</code></p>
          <p> Routing name: <code>{{$route .name}}</code></p>
          <p> Routing query parameters: <code>{{$route. Query | json}}</code></p>
        </div>
      </div>
    </div >
 
Test results, is not very good.


So far, the basic function of vue-router even after learning.

Reference http://www.cnblogs.com/keepfool/p/5690366.html
But this article is based on the vue1.x version, so really encountered a lot of holes ah.