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='msg'>  <br>
    15.                 <router-link to="/login?name=张三&age=20">去登录,并传值</router-link> <br>
    16.                 <router-link :to="'/login?name='+msg">去登陆,传输入值</router-link>
    17.             </h1>
    18.         </div>
    19.     </template>
    20.     <script>
    21.         var MainPage = Vue.component("mainCom", {
    22.             template: '#main',
    23.             data(){ return{ msg: "" } }
    24.         })
    25.         var LoginPage = Vue.component("loginCom", {
    26.             // url路径拼接键值对传值, 会传入$route.query字段
    27.             template: "<h1>登录页:{{$route.query.name}}-{{$route.query.age}}</h1>",
    28.             created() {
    29.                 // 在路由跳转的组件中会生成一个$route对象,记录路由跳转信息,可用于路由传值和路由监听
    30.                 console.log(this.$route)
    31.             },
    32.         })
    33.         const router = new VueRouter({
    34.             routes:[
    35.                 {path:'/', component: MainPage},
    36.                 {path:"/login", component: LoginPage}
    37.             ]
    38.         })
    39.         new Vue({
    40.             el: '#myApp',
    41.             router
    42.         })
    43.         // 总结: 路由传值方式一: url路径拼接传值
    44.         // 传: 在发送数据的组件中router-link路径后使用?拼接键值对传值
    45.             //<router-link to="/login?name=张三&age=20"></router-link>
    46.         // 接: 在接收数据的组件中, 使用this.$route.query接收数据
    47.             // <h1>{{$route.query.name}}-{{$route.query.age}}</h1>
    48.     </script>
    49. </body>