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

好家伙,

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"   //要返回的路径     
}