Vue-設置默認路由選中

需求分析：

　　一個導航組件，需要其中一個是選中狀態，並且樣式呈現高亮，選中的導航對應的頁面也需要展示出來。

功能實現：

router-link內置有一個選中狀態，當處於當前路由時，會給 router-link 標簽加一個類名 router-active-class；
同時還提供有一個 exact 屬性，當加了 exact 屬性的時候表示精確匹配，也就是會精確匹配 Url，所以如果給主路由設置了 exact 屬性的話，當處於子路由時，Url 就匹配不到主路由了，那么主路由也就不會處於選中狀態；
所以如果想主路由和子路由都處於選中時不用設置 exact 屬性。

標簽:  router-link       //在頁面中會解析為我們熟系的 a 標簽

類：router-active-class     //在這個類名下設置路由選中的高亮樣式

屬性：exact           //精准匹配路由   

路由：

routes: [
    {
      path: '/page1',
      name: 'Page1',
      component: Page1
    } ,
    {
      path: '/page2',
      name: 'Page2',
      component: Page2,
      children:[
                {
                   path: '/chil1',
                   name: 'Chil1',
                   component: Chil1
                },
                {
                    path: '/chil2',
                    name: 'Chil2',
                    component: Chil2
                }
            ]     
    },
    {
      path: '/page3',
      name: 'Page3',
      component: Page3
    }
  ]        

html：

<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link>

css：

.router-active-class{
    color: #fff,
    background-color: red    
}