Vue router

现在火热的框架中都具有路由（router）的功能，vue当然也不例外，vue路由功能的实现借助于官方提供的一个vue-router插件

所以在写路由的第一步就是去安装这个插件顺便把vue也一起安装好

npm i -S vue vue-router

然后在页面引入vue 和 vue-router

一级路由

vue路由的实现大体需要4步

第一步就是先将每个路由要加载的组件写出来

在这里我定义三个组件

var NewsComponent = {            template: `
    
     新闻
    
`        }        var ShopComponent = {            template: `
    
     商城
    
`        }        var NotFoundComponent = {            template: `
    
     404
    
`        }

第二步将路由地址与组件联系配置好

var routes = [{            path: '/',            redirect: '/news'        }, {            path: '/news',            component: NewsComponent        }, {            path: '/shop',            component: ShopComponent        }, {            path: '*',            component: NotFoundComponent        }]

第三部创建一个VueRouter对象

var router = new VueRouter({            routes        })

最后一步将路由实例注册到vue实例中去

var app = new Vue({            router        }).$mount("#app ")

经过完善html内容

    
        
     
      新闻管理
             
     
      商城管理
             
     
            
              
     
    

即可实现一个简单的一级路由

效果如下

点击可以切换路由

**路由这块内容，要注意几个route的变形写法都是固定的，不能更改。

html内容中的router-link标签经过渲染后在页面中会生成一个a标签，标签中的to属性代表着点击后的路由跳转地址，后面的router-view标签则是专门用来渲染路由内容的，vue极其适合做不刷新页面的的单页面应用**

路由实现动态渲染

先定义一个公共组件，在模板中放入一个传入的变量

const User = {  template: '
    
     user
    
'}

然后定义一个路由实例

const router = new VueRouter({  routes: [{    path: '/user/:id',    component: User  }]})

最后还是老样子，把路由注册到vue实例中

const app = new Vue({  router}).$mount('#app')

在body中写入

    
  
     
      /user/foo
       
     
      /user/bar
       
     
    

打开页面并打开vue调试工具，点击两个按钮切换后在页面中并不会看到什么变化，但是我们可以在调试工具中看到

有一个$route对象其中有一个跟随路由变化的属性params，其中的id就是我们写在/user/后面的内容，那么很方便的我们就拿到路由跳转的信息，可以据此来选择加载路由上不容的数据

嵌套路由

嵌套路由父级路由与一级路由相似

不过在父级模板中要添加嵌套的路由标签HTML body：

    
  
     
      新闻管理
       
     
      商城管理
       
     
    
        
     
    

父级模板：

var NewsComponent = {  template: `
    
     新闻    
     
      添加新闻
         
     
      搜索新闻
         
        
    
`}var ShopComponent = {  template: `
    
     商城    
     
      添加商品
         
     
      搜索商品
         
        
    
`}

子级路由：

var NewsAddComponent = {  template: `
    
    
         
       
    
`}var NewsSearchComponent = {  template: `
    
    
     
            
       
                
新闻ID
                
新闻标题
                
操作
             
             
                 
001
                 
ofo在山里频繁现身
                 
删除
             
           
     
   
    
`}、var GoodsSearchComponent = {            template: `
    
          
                
             
    
`        }var GoodsAddComponent = {          template: `
    
            
     
                    
       
                       
商品ID
                       
商品名称
                       
操作
                    
                  
                     
001
                     
ofo小黄车
                     
添加
                  
                
     
        
    
`        }

实例化一个路由：

routes = [{            path: '/',            redirect: '/news'        }, {            path: '/news',            component: NewsComponent,            children: [{                path: 'add',                component: NewsAddComponent            }, {                path: 'search',                component: NewsSearchComponent            }, {                path: '*',                component: NotFoundComponent            }]        }, {            path: '/shop',            component: ShopComponent,            children: [{                path: 'add',                component: GoodsAddComponent            }, {                path: 'search',                component: GoodsSearchComponent            }, {                path: '*',                component: NotFoundComponent            }]        }})

注册路由：

var app = new Vue({  router}).$mount('#app')

效果如下：