vue - 路由传递参数

结构目录

 

 

1. 页面传值（不同之间的页面传值）

　　1.1 index.js配置

源码：

// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// Home
import Home from '@/components/Home'

import One from '@/components/One'

// Vue全局使用Router
Vue.use(Router)

// 定义路由配置
export default new Router({
  routes: [                //配置路由，这里是个数组
    {                        //每一个链接都是一个对象
      path: '/',            //链接路径
      name: 'Home',        //路由名称，
      component: Home,     //对应的组件模板
      alias: '/home'
    },
    {
      path:'one', // 子页面1
      name: 'one', // 路由名称-命名路由
      component:One
  }
  ]
})

 

　　1.2配置Home.vue

源码：

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <!-- 添加子路由导航 -->
        <p>导航 ：
           <router-link :to="{name: 'one', params:{username:'test123'}}">子页面1</router-link>
        </p>
        <!-- 子页面展示部分 -->
        <router-view/>
    </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      msg: "Home Page!"
    };
  }
};
</script>

<style scoped>
</style>

 

 

　　1.3配置One.vue

源码：

<template>
  <div class="hello">
    <h2>{{msg}} - {{$route.params.username}}</h2>
  </div>
</template>

<script>
export default {
  name: "one",
  data() {
    return {
      msg: "Welcome to One!"
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

 

2. url传值（传递参数-同页面->向下page传值）

　　2.1：设置路由

　　2.2：传值

　　2.3：主页面获取参数

 

3. 编程式导航-params传递参数

　　3.1：设置路由

　　3.2：设置传递参数

　　说明：
　　　　A、动态路由使用params传递参数，在this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。
　　　　B、以上方式参数不会显示到浏览器的地址栏中，如果刷新一次页面，就获取不到参数了

　　3.3：接收参数并且显示

 

4.编程式导航-query传递参数

　　4.1：修改传递参数形式

　　4.2：修改接收参数形式

 

5.以上两种方式，有什么不同呢？params和query

　　5.1 query传参

　　5.2：params传参