vue 笔记（十六） 参数传递及重定向

接着上一个工程写带有参数请求的路由跳转

一、

1.主页面 Main.vue 传递参数 

个人信息



用户列表

name：传递的组件名

params：传递参数

改成了：to  ，即将这一属性绑定成对象

2.路由配置 index.js 里

children:[
        {
          path:'/user/profile/:id/:name',
          name:'UserProfile',
          component:Profile
        },
        {
          path: '/user/list',
          component: List
        }
      ]

添加name 与上面组件名一致

/：id    添加参数占位符

3.在组件页 Profile.vue 中

注意：template中 只能有一个元素结点

使用 $route.params.id  来获得参数id的值

4.结果：

二、解耦方式

1.路由配置 index.js 中 添加支持传递参数

children:[
        {
          path:'/user/profile/:id/:name',
          name:'UserProfile',
          // 支持传递参数
          props:true,   
          component:Profile
        },
        {
          path: '/user/list',
          component: List
        }
      ]

2.同样在Main.vue 中 

个人信息



用户列表

3. 在 组件页 Profile.vue 中

4.运行结果：

 

三、重定向

下面写一个重定向到首页的goHome路由路径

1. 在路由配置 index.js 中 添加一条

{
      path: '/goHome',
      redirect:'/main'
    }

2. 主页面 Main.vue 中 添加 

                
                回到首页
              

3.运行结果

点击回到首页，显示

重定向成功！