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/张三">去登录,并传值</router-link> <br>
    16.                 <router-link :to="'/login/'+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.params字段
    27.             template: "<h1>登录页:{{$route.params.name}}</h1>",
    28.             created() {
    29.                 // 在路由跳转的组件中会生成一个$route对象,记录路由跳转信息,可用于路由传值和路由监听
    30.                 console.log(this.$route)
    31.             },
    32.         })
    33.         const router = new VueRouter({
    34.             routes:[
    35.                 {path:'/', component: MainPage},
    36.                 // 在路由配置中, 把路径后添加 /:变量名, 这种写法的路径叫动态url也叫友好型url
    37.                 // 在正常的url路径后添加/:, 路径不变, 可添加数据, 用于路径传值
    38.                 // "/login/:name" 表示/login路径下传入一个变量名为name的值, 多个值/:name/:age
    39.                 {path:"/login/:name", component: LoginPage},
    40.                 // 路由设置动态路径后, 普通路径/login, 访问不到动态路由地址, 所以, 如果需要的情况下,普通路径和动态路径都要写
    41.                 {path:"/login", component: LoginPage}
    42.             ]
    43.         })
    44.         new Vue({
    45.             el: '#myApp',
    46.             router
    47.         })
    48.         // 总结: 路由传值方式二: 动态路由/动态url/友好url传值
    49.         // 1, 配: 在路由配置信息中, 把路径后添加 /:变量名
    50.             // {path:"/login/:name", component: LoginPage}
    51.         // 2, 传: 在发送数据的组件中router-link路径后使用/拼接数据 传值
    52.             //<router-link to="/login/张三"></router-link>
    53.         // 3, 接: 在接收数据的组件中, 使用this.$route.params接收数据
    54.             // <h1>{{$route.params.name}}</h1>
    55.     </script>
    56. </body>