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('../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>

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

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值