首页 > 其他 > 详细

vue 参数传递以及重定向

时间:2021-05-10 13:13:25      阅读:12      评论:0      收藏:0      [点我收藏+]

简单例子

1.前端传递参数
? 此时我们在Main.vue中的route-link位置处 to 改为了 :to,是为了将这一属性当成对象使用,注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配,因为这样 Vue 才能找到对应的路由路径;

个人信息
2.修改路由配置,增加props:true属性

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

3.前端显示
在要展示的组件Profile.vue中接收参数

<template>
  <div>
    <h1>个人信息</h1>
    {{id}}
  </div>
</template>

<script>
    export default {
        props: [‘id‘],
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

运行程序
技术分享图片

重定向

添加一个配置信息

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

添加片段

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

技术分享图片
点击即可回到main

vue 参数传递以及重定向

原文:https://www.cnblogs.com/OfflineBoy/p/14750213.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!