第三十四篇:路由嵌套,参数传递和重定向

当前位置:

首页 > temp > JavaScript教程 >

第三十四篇:路由嵌套,参数传递和重定向

好家伙,

1.路由嵌套

给路由写一个子路由,格式大概这个样子

{
      //登录页
      path: '/main',
      component: Main,
      //  写入子模块
      children: [
        {
          path: '/user/profile',
          component: UserProfile,
        }, {
          path: '/user/list',
          component: UserList,
        },
      ]
    },

2.参数传递

(1)配置路由参数:在路由的一个path下绑定一个属性

path:"/login/:id",绑定id

小插曲:router-link的参数

// 命名路由带路由参数params，地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

(2)链接传递参数

// 同上
<router-link :to="{name: 'Userlogin', params: { id: '1' }}"> to apple</router-link>

(3)页面显示参数

方法一:直接route

<div>{{ $route.params.id }}</div>

方法二:(插槽那边用过的,弄个props接口)

子路径那里加上

props: ture

<templete>
<div>{{id}}</div>

</templete>

<script>
export dafault{
  props: ['id'],  
}

</script>

3.组件重定向

写一个新路径,让该路径回到主页面

作用:类似返回首页的功能

上代码:

{
  path:"/huijiashizuihaodeliwu", //随便设
  redirect:"/main"   //要返回的路径     
}

出处：https://www.cnblogs.com/FatTiger4399/p/15415794.html

栏目列表