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}}