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传参