vue-router.js

    1. <body>
    2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    3.     <script src="./vue-router.js"></script>
    4.     <div id='myApp'>
    5.         <router-link to="/">主页</router-link> |
    6.         <router-link to="/login">登录</router-link>
    7.         <router-view></router-view>
    8.     </div>
    9.     <!-- 主页模板 -->
    10.     <template id="main">
    11.         <div>
    12.             <h1>
    13.                 主页  <br>
    14.                 <input v-model='obj.query.name'>  <br>
    15.                 <router-link :to="obj">去登陆,传输入值</router-link>
    16.             </h1>
    17.         </div>
    18.     </template>
    19.     <script>
    20.         var MainPage = Vue.component("mainCom", {
    21.             template: '#main',
    22.             data(){ return{ 
    23.                 obj: {
    24.                     path: "/login",
    25.                     query: {
    26.                        name: "" ,
    27.                        age: 20
    28.                     }
    29.                 }
    30.              } }
    31.         })
    32.         var LoginPage = Vue.component("loginCom", {
    33.             // query对象传值, 会传入$route.query字段
    34.             template: "<h1>登录页:{{$route.query.name}}-{{$route.query.age}}</h1>",
    35.             created() {
    36.                 // 在路由跳转的组件中会生成一个$route对象,记录路由跳转信息,可用于路由传值和路由监听
    37.                 console.log(this.$route)
    38.             },
    39.         })
    40.         const router = new VueRouter({
    41.             routes:[
    42.                 {path:'/', component: MainPage},
    43.                 {path:"/login", component: LoginPage}
    44.             ]
    45.         })
    46.         new Vue({
    47.             el: '#myApp',
    48.             router
    49.         })
    50.         // 总结: 路由传值方式三: query对象传值
    51.         // 传: 在发送数据的组件中router-link路径to动态绑定对象, 对象的path字段设置url, 对象query字段设置数据
    52.             //<router-link :to="obj"></router-link>
    53.         // 接: 在接收数据的组件中, 使用this.$route.query接收数据
    54.             // <h1>{{$route.query.name}}-{{$route.query.age}}</h1>
    55.     </script>
    56. </body>