Vue页面跳转+传递参数

1.路径传值

1.关于如何在vue页面跳转并且传递参数
1.1.使用Menu 导航菜单
通过iView插件导入Menu 导航菜单：如下图

菜单的代码，其中在method方法下通过if判断使用路由来跳转到相应的页面

<template>
    <div class="layout">
        <Layout :style="{minHeight: '100vh'}">

            <Sider collapsible :collapsed-width="100" v-model="isCollapsed">
                <Menu :active-name="$route.name" theme="dark" width="auto" accordion :class="menuitemClasses"
                @on-select="selectMenu">
                    <MenuItem name="0-0">
                        <Icon type="ios-navigate"></Icon>
                        <span>后台管理系统</span>
                    </MenuItem>

                    <MenuItem name="0-1">
                        <Icon type="ios-navigate"></Icon>
                        <span>控制面板</span>
                    </MenuItem>
                    
                    <Submenu name="1">
                        <template slot="title">
                            <Icon type="ios-paper" />
                            系统管理
                        </template>
                        <MenuItem name="1-1">角色管理</MenuItem>
                        <MenuItem name="1-2">用户管理</MenuItem>
                        <MenuItem name="userinfo">个人管理</MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-people" />
                            产品管理
                        </template>
                        <MenuItem name="product">产品管理</MenuItem>
                       
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="ios-people" />
                            项目管理
                        </template>
                        <MenuItem name="project">项目管理</MenuItem>
                       
                    </Submenu>

                    <Submenu name="4">
                        <template slot="title">
                            <Icon type="ios-people" />
                            审批管理
                        </template>
                        <MenuItem name="approve1">一级审核</MenuItem>
                       <MenuItem name="approve2">二级审核</MenuItem>
                       <MenuItem name="approve3">财务放款</MenuItem>
                       
                    </Submenu>
                </Menu>
            </Sider>

            <Layout>
                <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                     <Menu mode="horizontal">
                   
                    <div class="layout-nav">
                        
                        
                        <MenuItem name="4">
                            <Icon type="ios-paper"></Icon>
                            退出
                        </MenuItem>
                    </div>
                </Menu>
                </Header>
                
                <Content :style="{padding: '0 16px 16px'}">
                    <Breadcrumb :style="{margin: '16px 0'}">
                        <BreadcrumbItem>主页</BreadcrumbItem>
                    </Breadcrumb>

                        <div>
                            <Row>
                                <Col span="24">
                                <!--页面开始部分-->
                                <router-view></router-view>
                                <!--页面结束部分-->
                                </Col>
                            </Row>
                        </div>
                        
                </Content>

               
            </Layout>
        </Layout>
    </div>
</template>
<script>
    export default {
        components: {
            
        },
        data () {
            return {
                isCollapsed: false,
            };
        },
        computed: {
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods: {
            selectMenu(name){
                //alert(name)
                if ("product" == name ){
                     //根据路由跳转
                     this.$router.push('/main/product')
                }
                if("userinfo" == name){
                    //alert(99)   
                    this.$router.push('/main/userinfo') 
                }
                if("project" == name){
                    //alert(99)   
                    this.$router.push('/main/project') 
                }
                if("approve1" == name){
                    //alert(99)   
                    this.$router.push('/main/approve1') 
                }
                if("approve2" == name){
                    //alert(99)   
                    this.$router.push('/main/approve2') 
                }
                if("approve3" == name){
                    //alert(99)   
                    this.$router.push('/main/approve3') 
                }


            }
        },
        created(){
        	console.log('start')
        },
        mouted(){
        	console.log(this.$el)
        }
    }
</script>
<style scoped>
    .layout-con{
        height: 100%;
        width: 100%;
    }
    .menu-item span{
        display: inline-block;
        /*  overflow: hidden;超出部分隐藏*/
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    .layout-nav{
        width: 120px;
        margin: 0 auto;
        margin-right: 20px;
    }
</style>

2.跳转到另一个页面前需要准备以下工作 在router下配置所要跳转的页面

router路由配置内容，这里只配置了一个页面

{
      path: '/main',
      name: 'main',
      component: main,
      children: [
        {
          path: 'product',
          name: 'product',
          component: () => import('@/view/product/product')
        }
      ]
    },

3.下面就是在页面上路由跳转
通过.$router来跳转到相应页面（前提路由什么都得配置好）

//路由跳转
 this.$router.push({
   name: 'product'
   })

4.路由跳转带参数的方法
4.1根据name跳转

updateInfo(index){  
    //路由跳转
    this.$router.push({
        name: 'product_update',
        //根据params：{参数} 来进行传值
       params :{
           id : this.tableData1[index].id
       }
    })
},

跳转到指定页面接收传递的参数

//通过这个方法this.$route.params来接收参数
 let id= this.$route.params.id;

4.2根据path跳转

this.$router.push({
         path: '/emp',
         //根据params：{参数} 来进行传值
          query :{
            row: row
          }
          });

跳转到指定页面接收传递的参数

this.emp= this.$route.query.row;