vuejs路由嵌套、设置高亮、传参

最新推荐文章于 2024-02-27 10:27:09 发布

置顶山丘-

最新推荐文章于 2024-02-27 10:27:09 发布

阅读量411

点赞数

分类专栏： VueJS

本文链接：https://blog.csdn.net/qq_25635139/article/details/88086430

版权

VueJS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中如何进行路由嵌套，设置导航高亮以及如何在路由间传递参数。通过配置路由，使用<router-view>组件实现页面展示，并通过在链接上添加exact属性实现高亮效果。同时讲解了参数传递的方法，包括单一参数和多个参数的传递，以及在接收端如何获取这些参数。

摘要由CSDN通过智能技术生成

目录结构

路由配置：

注意：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}}