14.0、vue-参数传递及重定向

14.0、vue-参数传递及重定向

Main.vue文件中传递数据id:1

<template>
<el-row class="tac">
  <el-col :span="6">
    <h5>默认颜色</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1"><router-link to="/user/manager">用户信息管理</router-link></el-menu-item>
<!--          <el-menu-item index="1-1">选项1</el-menu-item>-->
              <el-menu-item index="1-2"><router-link v-bind:to="{name:'content',params:{id: 1}}">参数传递</router-link></el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  <router-view/>
</el-row>
</template>
<script>
export default {
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

 

router路由文件中接收数据id

import Vue from 'vue'
import Router from 'vue-router'
import Content from '../components/Content'

Vue.use(Router)
export default new Router({
  routes: [
{
  // 路由路径
  path: '/content/:id',
  name: 'content',
  // 跳转的组件
  component: Content
},
  ]
})

在Content.vue组件中将数据id显示出来

<template>
   <div>
         <h1>内容页</h1>
         {{$route.params.id}}
   </div>
</template>

<script>
export default {
  name: 'Content'
}
</script>

<style scoped>

</style>

页面的重定向操作代码如下：

在路由index.js文件中

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      // 路由路径
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/gotologin',
      redirect: '/Login'
    }
  ]
})

在Login登录界面输入账号密码登录进入Main首页,并且将用户名显示在首页上。

Login.vue组件文件，获取input用户名将数据传递给index.js路由

<template>
      <div>
            <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
                  <h3 class="login-title">欢迎登录</h3>
                  <el-form-item label="账号" prop="username">
                        <el-input type="text" placeholder="请输入账号" v-model="form.username"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                        <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
                  </el-form-item>
                  <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
            </el-form>
            <el-dialog
            title="温馨提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
                  <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogVisible=false">确定</el-button>
                  </span>
            </el-dialog>
      </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      // 表单验证，需要在el-form-item元素中加上prop元素
      rules: {
        username: [
          {required: true, message: '账号不可为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不可为空', trigger: 'blur'}
        ]
      },
      // 对话框显示和隐藏
      dialogVisible: false
    }
  },
methods: {
    onSubmit (formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用vue-router路由到指定页面，该方式称之为编程式导航
          this.$router.push('/Main/' + this.form.username)
        } else {
          this.dialogVisible = true
          return false
        }
      })
    }
  }
}
</script>

路由index.js文件，接收来自login的数据并且用props:true给前端Main页面传递过去

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../components/Main'
import Login from '../components/Login'

Vue.use(Router)
export default new Router({
  routes: [
    {
      // 路由路径
      path: '/Main/:name',
      props: true,
      name: 'Main',
      // 跳转的组件
      component: Main,
      children: [
        {
          path: '/user/manager', name: 'usermanager', component: UserManager
        }
      ]
    },
    {
      // 路由路径
      path: '/Login',
      name: 'Login',
      component: Login
    }
  ]
})

Main前端主界面接收props: ['name'],来自index.js路由的用户名数据并显示在页面上

<template>
<el-row class="tac">
  <el-col :span="6">
    <h5>默认颜色</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1"><router-link to="/user/manager">用户信息管理</router-link></el-menu-item>
<!--          <el-menu-item index="1-1">选项1</el-menu-item>-->
              <el-menu-item index="1-2"><router-link v-bind:to="{name:'content',params:{id: 1}}">参数传递</router-link></el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
        <span>{{name}}</span>
  </el-col>
  <router-view/>
</el-row>
</template>
<script>
export default {
  props: ['name'],
  name: 'Main',
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

        如果在路由router[]数组对象的属性中加入mode: 'history'模式的话url请求中的 # 就会删去。添加该属性默认是Hash模式，也就是url中带有 # 的模式