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>