vue router 技巧

最新推荐文章于 2022-06-06 11:45:09 发布

阿豪boy

最新推荐文章于 2022-06-06 11:45:09 发布

阅读量51

点赞数 1

文章标签： vue python java react html

本文链接：https://blog.csdn.net/qq_35516360/article/details/122066553

版权

原文链接: vue router 技巧

上一篇: 使用A* （AStar）算法自动求解拼数字游戏

下一篇: vue-router 权限管理部分页面的登录检测

1，将动态路由的参数转为属性值

在router中设置props为true，子组件设置对应的属性值，这样就能在子组件中直接使用路由的参数了

    {
      path: '/a2/:id',
      name: 'a2',
      component: A2,
      props: true
    },

    props: ['id'],

也可以使用函数的形式

    {
      path:'/list/:id',
      name:'list',
      component:List,
      props : (route)=>({
        query:route.query.q,
        id:route.params.id
      })
    }

2，命名视图,在同一页面，显示多个router-view

给路由定义不同的名字，根据名字进行匹配
给不同的router-view定义名字，router-link通过名字进行对应组件的渲染。

export default new Router({
  routes: [
    {
      path: '/goods',
      name: 'Goodlists',
      components:{
        default:Goodlists,
        title:Title,
        image:Img,
      } 
     } 
  ]
})

  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <router-view name="title" class="left"></router-view>
    <router-view name="image" class="right"></router-view>
  </div>