Learning blog: [Vue] passing parameters and redirection

Parameter passing

method one

• Modify routing configuration

  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
      }
    ]
  });
  

• View layer passing parameters

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

  :to can treat the attribute as an object, and the name attribute in router-link must match the name attribute in the route

• accept parameters

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

  Note that route is not router and all elements must be under the root node or an error will be reported

---

way two

use props

• Modify routing configuration

  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
      }
    ]
  });
  

• pass parameters

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

• accept parameters

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

redirect

Add in route

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

index.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'
    }
  ]
});

View layer configuration

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