学習ブログ: [Vue] パラメーターの受け渡しとリダイレクト

パラメータの受け渡し

方法 1

• ルーティング構成を変更する

  import Vue from 'vue';
  import VueRouter from 'vue-router';
  
  import Main from '../views/Main';
  import Login from '../views/Login';
  
  import UserProfile from '../views/user/Profile'
  import UserList from '../views/user/List'
  
  Vue.use(VueRouter);
  
  export default new VueRouter({
        
        
    routes:[
      {
        
        
        path: '/main',
        component: Main,
        children: [
          {
        
        
            path: '/user/profile/:id',
            name:'UserProfile',
            component: UserProfile
          },
          {
        
        
            path: '/user/list',
            component: UserList
          }
        ]
      },
      {
        
        
        path: '/login',
        component: Login
      }
    ]
  });
  

• パラメータを渡すビューレイヤー

  <router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
  

  :to は属性をオブジェクトとして扱うことができ、router-link の name 属性はルートの name 属性と一致する必要があります。

• パラメータを受け入れる

  <template>
    <div>
      <h1>个人信息</h1>
      {
       
       { $route.params.id }}
    </div>
  </template>
  

  ルートはルーターではなく、すべての要素はルート ノードの下にある必要があり、そうでない場合はエラーが報告されることに注意してください。

---

方法2

小道具を使う

• ルーティング構成を変更する

  import Vue from 'vue';
  import VueRouter from 'vue-router';
  
  import Main from '../views/Main';
  import Login from '../views/Login';
  
  import UserProfile from '../views/user/Profile'
  import UserList from '../views/user/List'
  
  Vue.use(VueRouter);
  
  export default new VueRouter({
        
        
    routes:[
      {
        
        
        path: '/main',
        component: Main,
        children: [
          {
        
        
            path: '/user/profile/:id',
            name:'UserProfile',
            component: UserProfile,
            props: true
          },
          {
        
        
            path: '/user/list',
            component: UserList
          }
        ]
      },
      {
        
        
        path: '/login',
        component: Login
      }
    ]
  });
  

• パラメータを渡す

  <router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
  

• パラメータを受け入れる

  <template>
    <div>
      <h1>个人信息</h1>
      {
       
       {id}}
    </div>
  </template>
  
  <script>
  export default {
    props: ['id'],
    name: "UserProfile"
  }
  </script>
  
  <style scoped>
  
  </style>
  

リダイレクト

ルートを追加する

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

インデックス.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import Main from '../views/Main';
import Login from '../views/Login';

import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'

Vue.use(VueRouter);

export default new VueRouter({
    
    
  routes:[
    {
    
    
      path: '/main',
      component: Main,
      children: [
        {
    
    
          path: '/user/profile/:id',
          name:'UserProfile',
          component: UserProfile,
          props: true
        },
        {
    
    
          path: '/user/list',
          component: UserList
        }
      ]
    },
    {
    
    
      path: '/login',
      component: Login
    },
    {
    
    
      path: '/toHP',
      redirect: '/main'
    }
  ]
});

レイヤー構成を表示する

<el-menu-item index="1-3">
  <!--插入的地方-->
  <router-link to="/toHP">返回首页</router-link>
</el-menu-item>