登錄
      注冊
      
    

  
    
    
    
    
    
    
  
  
    
    
      

      登錄
      注冊
      
    

同時，我們還可以利用tag標簽來渲染router-link元素，router-link默認渲染為a鏈接元素，使用tag標簽可以渲染其他元素，上述代碼中渲染為span元素了。無論渲染成什么元素，都依然與a連接一樣擁有跳轉(zhuǎn)的點擊事件

重定向技術(shù)以及默認路徑

默認路徑

我們可以使用默認路徑的方式指定根路徑,只需要在上述路由定義的方式中加入默認路徑即可

var routerObj = new VueRouter({
      routes:[
      //此處的component只能使用組件對象，而不能使用注冊的模板的名稱
        {path:"/",component:login},
        {path:"/login",component:login},
        {path:"/register",component:register}
      ]
    })

重定向方式指定默認路徑

同樣的使用一行代碼即可直接重定向到login路徑下，相比上述的默認路徑，此方式在url的展示上更為明顯

var routerObj = new VueRouter({
      routes:[
      //此處的component只能使用組件對象，而不能使用注冊的模板的名稱
        {path:"/",redirect:"/login"},
        {path:"/login",component:login},
        {path:"/register",component:register}
      ]
    })

路由選中之后高亮設置

使用默認類設置為高亮

Vue為router-link內(nèi)置了一個連接點擊之后高亮的類router-link-active,即可以在自己的style中設置

      .router-link-active{
        color: red;
        font-weight: 800;
        font-style: italic;
        font-size: 30px;
      }
    

使用自定義類名

當我們想使用第三方定義的選中樣式，或者是自己想定義更為簡潔的樣式，可以使用linkActiveClass來定義，即在路由初始化時指定類名，在指定樣式時再自定義樣式

var routerObj = new VueRouter({
      routes:[
      //此處的component只能使用組件對象，而不能使用注冊的模板的名稱
        {path:"/",redirect:"/login"},
        {path:"/login",component:login},
        {path:"/register",component:register}
      ],
      linkActiveClass:'myactive'
    })

指定樣式

      .router-link-active,.myactive{
        color: red;
        font-weight: 800;
        font-style: italic;
        font-size: 30px;
      }
    

路由傳參

使用query方式傳遞參數(shù)

首先我們再設置路由鏈接是指定參數(shù)

登錄

且可以指定并獲取多個參數(shù)，主要是再定義的組件對象內(nèi)部使用created方法來獲得

var login={
      template:'
登錄組件---{{$route.query.id}}--{{$route.query.name}}
',
      created(){
        console.log(this.$route.query.id)
      }
    }

使用params方式傳遞參數(shù)

首先我們在路由定義的時候采用:定義params參數(shù)

var routerObj = new VueRouter({
      routes:[
      //此處的component只能使用組件對象，而不能使用注冊的模板的名稱
        {path:"/login/:id/:name",component:login},
        {path:"/register",component:register}
      ],
    })

在實際使用過程中如何傳遞

   登錄
      注冊
      

在組件中使用

var login={
      template:'
登錄組件---{{$route.params.id}}
',
      created(){
        console.log(this.$route.params.id)
      }
    }

路由嵌套的實現(xiàn)

  
    
    
    
    
    

    
  
  
 

  Account