vuejs路由嵌套、設置高亮、傳參

目錄結構

路由配置：

注意：redirect:設置進入欄目時默認顯示頁面

父頁面注意添加:<router-view></router-view>

-----------------------------------------------------------------------------------------------------------------------------------------------

高置高亮

export default new Router({
  //去掉路由模式下的#號
  mode:"history",
  //高亮樣式
  linkActiveClass:"active",
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    }

鏈接上加入屬性exact

效果圖：

-----------------------------------------------------------------------------------------------------------------------------------------------

傳參

路由器設置

{
      path: '/master/:count',
      name: 'master',
      component: Master
    }

跳轉帶參 

<li>
      <router-link :to="{name:'master', params:{count:100}}">
        專家
      </router-link>
</li>

接收參數

專家:{{$route.params.count}}

-----------------------------------------------------------------------------------------------------------------------------------------------

傳多個參數或者對象

//路由
{
      path: '/master/:count/:type',
      name: 'master',
      component: Master
    }


------------------------------------------------------
//跳轉

<router-link :to="{name:'master', params:{count:100,type:obj}}">
        專家
</router-link>


//帶對象
export default {
    name:"NavList",
    data(){
      return{
        obj:{
          name:"iwen"
        }
      }
    }
  }
</script>

------------------------------------------------------
接收值

專家:{{$route.params.count}}--{{$route.params.type.name}}