一、Vue.js简介

• Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
• 通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
• Vue.js 路由需要载入

二、Vue.js的CDN

三、简单的router示例：

    
                 
     
    
      
欢迎来到我的网站
    
      
        
               
               
               
       
        首页
               
       
        个人中心
           
    
          
          
      
     

• 注册router、创建router实例、定义routes、router-link标签、router-view标签五部曲

四、命名的路由以及路由视图

    
                 
     
    
      
欢迎来到我的网站
    
      
        
               
               
               
       
        首页
               
       
        个人中心
           
    
          
          
      
     

• 命名路由是在定义路由时加上name属性，然后给router-link标签上的to属性绑定属性，格式是:to='{name:'XXX'}'。
• 路由命名的好处就是无论path改成什么，只要是name不变，链接就依旧生效。

五、路由的参数

    
                 
     
    
      
       首页
          
      
       调转到首页
          
      
       关于我们
          
          
      
       用户管理
          
      
        
           
      
     

六、子路由

    
                 
     
    
      
       首页
          
      
       关于我们
          
      
       用户管理
          
      
        
           
      
     

七、手动更新路由

    
                 
     
    
      
       首页
          
      
       关于我们
          
      
       用户管理
          
      点我调转到关于我们    
      
        
           
      
     

八、路由的钩子

就是：meta: { required_login: true},在需要登录才能访问的path中加入钩子函数

    
                 
     
    
      
       首页
          
      
       登陆
          
      
       用户管理
          
      
       vip管理
          
      
        
           
      
     

九、子路由的匹配以及元信息的配置

路由的生命周期就是从一个路由跳转到另一路由整个过程，下面介绍两个钩子。

router.beforeEach() router.afterEach() 详情请看代码：

    
                 
     
    
      
       首页
          
      
       登陆
          
      
       用户管理
          
      
       vip管理