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.                 <button @click="btnClick">去登录</button>
    18.             </h1>
    19.         </div>
    20.     </template>
    21.     <script>
    22.         var MainPage = Vue.component("mainCom", {
    23.             template: '#main',
    24.             data(){ return{ msg: "" } },
    25.             methods: {
    26.                 btnClick(){
    27.                     // 使用js代码实现路由跳转就是 编程式导航跳转
    28.                     // router : 全局唯一的路由配置对象, 可用于路由跳转
    29.                     // $route : 每一个路由跳转的组件都有的路由信息对象
    30.                     router.push("/login");  // 直接跳转
    31.                     // 跳转并传值
    32.                     router.push("/login?name=张三")
    33.                     router.push("/login/张三")
    34.                     router.push({
    35.                         path: "/login",
    36.                         query: {name: "张三"}
    37.                     })
    38.                     router.push({
    39.                         name: "myLogin",
    40.                         params: {name: '张三'}
    41.                     })
    42.                 }
    43.             },
    44.         })
    45.         var LoginPage = Vue.component("loginCom", {
    46.             // url路径拼接键值对传值, 会传入$route.query字段
    47.             template: "<h1>登录页:{{$route.query.name}}-{{$route.query.age}}</h1>",
    48.             created() {
    49.                 // 在路由跳转的组件中会生成一个$route对象,记录路由跳转信息,可用于路由传值和路由监听
    50.                 console.log(this.$route)
    51.             },
    52.         })
    53.         const router = new VueRouter({
    54.             routes:[
    55.                 {path:'/', component: MainPage},
    56.                 {path:"/login", component: LoginPage}
    57.             ]
    58.         })
    59.         new Vue({
    60.             el: '#myApp',
    61.             router
    62.         })
    63.     </script>
    64. </body>