Vue router传参与接收参数（含router路由基础配置）

一、router配置import App from '../app'const home = r => require.ensure([], () => r(require('../components/home')), 'home')const login = r => require.ensure([], () => r(require(

风正吹

4563人浏览 · 2018-07-23 22:48:59

风正吹 · 2018-07-23 22:48:59 发布

一、router配置

import App from '../app'

const home = r => require.ensure([], () => r(require('../components/home')), 'home')
const login = r => require.ensure([], () => r(require('../components/login')), 'login')
const register = r => require.ensure([], () => r(require('../components/register')), 'register')

export default [{
  path: '/',
  component: App,
  children: [
    {
      path: '',
      component: login
    },
    {
      path: 'home',
      name: 'home',
      component: home
    },
    {
      path: 'register',
      name: 'register',
      component: register
    },
  ]
}]

二、main.js配置

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/index'
import store from './store/index'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

new Vue({
  router,
  store,
}).$mount('#app')

三、index.html代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vuedemo</title>
</head>
<body>
  <div id="app">
    <router-view></router-view>
  </div>
</body>
</html>

四、app.vue代码如下：

<template>
  <div id="App">
    <router-view></router-view>
  </div>
</template>

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

<style>

</style>

五、页面组件如下
1.login.vue

<template>
  <div>
    <div id="login_box">
      <div style="margin-bottom: 20px">登陆</div>
      <router-link :to="{path:'register'}">注册账号</router-link>
      <router-link :to="{name:'home'}">登陆主页面</router-link>
      <div style="margin-top: 10px">
        <button @click="gotoHomePage">到home页面</button>
        <button @click="gotoRegisterPage">到register页面</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {}
    },
    methods: {
      gotoHomePage() {//去主页面
        //使用path路由不能与params联合使用，否则传递失效
        this.$router.push({path: 'home', query: {userName: 'MR,R', userId: 123}});
      },
      gotoRegisterPage() {//去注册页面
        // this.$router.push({name: 'register', params: {userId: 123, isFromLogin: true}});
        this.$router.push({name: 'register', query: {userId: 123,}});
      },
    },
    created: function () {
      document.title = '登陆界面'//设置标题
    }
  }
</script>

<style scoped>
  #login_box {
    width: 600px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    border: 1px solid green;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -300px;
    font-size: 22px;
  }

  button {
    font-size: 22px;
  }
</style>

2.home.vue

<template>
    <div>
      测试主页
      <router-link :to="{path:'login'}">到登陆页</router-link>
      <div style="margin-top: 10px">用户名：{{this.$route.query.userName}}</div>
      <div>用户ID：{{this.$route.query.userId}}</div>
    </div>
</template>

<script>
    export default {
        name: "home"
    }
</script>

<style scoped>
div{
  font-size: 22px;
}
</style>

3.register.vue

<template>
  <div>
    <div>注册</div>

    <p>
      <span>用户ID：{{this.$route.params.userId}}</span><br/>
      <span>来源：{{this.$route.params.isFromLogin ? "来自登陆页" : "并非来自登录页"}}</span>
    </p>

    <button @click="getData" style="font-size: 25px">获取传送过来的数据</button>
  </div>
</template>

<script>
  export default {
    name: "register",
    data() {
      return {}
    },
    created: function () {
      document.title = '注册'
    },
    methods: {
      getData() {
        console.log("用户ID：" + this.$route.params.userId);
        console.log("来源：" + (this.$route.params.isFromLogin ? "来自登陆页" : "并非来自登录页"));
      }
    }
  }
</script>

<style scoped>

</style>

六、实现效果如下：
这里写图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^