vue笔记-17（vue路由基础）

• 什么是路由

  1. 后端路由：对于普通的网站，所有的超链接倒是URL地址，所有的URL地址都对应服务器上对应的资源
  2. 前端路由：对于单页面应用程序来说，主要通过URL中的HASH(#号)来实现不同页面之间的切换，同事hash有一个特定：HTTP请求不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现
  3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

• vue-router路由的基本使用

  1. 安装vue-router路由模块
  2. 创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter。在new路由对象的时候可以为构造函数，传递一个配置对象

     //组件模板对象
     var login = {
         template : '
     登录组件
     '
     }
     var register = {
         template : '
     注册组件
     '
     }
     
     var routerObj = new VueRouter({
         //route //这个配置对象中的route表示【路由匹配规则】的意思
         routes: [
             { 
                 path : '/login' , //属性1path表示监听哪个路由链接地址
                 component: login //属性2component表示如果路由是前面匹配到的Path，则展示component属性对应的那个组件。并且component的属性值必须是组件的模板对象，不能是组件的应用名称
                 },{
                     path: '/register',
                     component: 'register'
                 }
         ]
     })
     

  3. 创建Vue实例，得到ViewModel

     var vm  = new Vue({
         el: '#app',
         data: {},
         methods: {},
         router: routerObj //将路由规则对象注册到vm实例上，用来监听url地址变化，然后展示对应的组件
     })
     

  4. 使用router-view组件来显示匹配到的组件

     登录
     注册
     
     
     
     

  5. 使用router-link跳转,默认为一个a标签，可以使用tag渲染为其他的标签

     登录
     注册
     

  6. 使用redirect属性

     var routerObj = new VueRouter({
         //route //这个配置对象中的route表示【路由匹配规则】的意思
         routes: [
             { path : '/', component: login },
             { path : '/', redirect: '/login' } //这里和node中的redirect两码事
         ]
     })
     

  7.完整代码demo

  
  
  
    
    
    
    
    
  
  
    
  
        
        
  使用a链接跳转
        登录
        注册
  
        
  
        
  
  
        
  使用router-link跳转
        
        
        登录
        注册