vue-router.js

    1. <style>
    2.     .router-link-exact-active {
    3.         background-color: red;
    4.     }
    6.     /* 路由组件的入场动画 */
    7.     .v-enter {
    8.         transform: translateX(200px)
    9.     }
    11.     .v-enter-active {
    12.         transition: 1s;
    13.     }
    15.     .v-enter-to {
    16.         transform: translateZ(0)
    17.     }
    18. </style>
    20. <body>
    21.     <!-- 步骤一: 在vue之后导入vue-router路由插件 -->
    22.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    23.     <script src="./vue-router.js"></script>
    24.     <div id='myApp'>
    25.         <!-- 步骤二: 在根组件模板中,添加路由跳转标签 -->
    26.         <!-- <a href="#/main">主页</a> |
    27.     <a href="#/login">登录</a> |
    28.     <a href="#/user">用户</a> -->
    29.         <!-- vue路由监视使用router-link组件代替a标签, 特点如下
    30.         1, router-link会被渲染成a标签, to属性渲染成href 
    31.         2, to属性不用写#, 渲染到href上时会自动补全
    32.         3, 点击router-link时会自动添加router-link-exact-active和router-link-active这两个class值
    33.     -->
    34.         <router-link to="/main">主页</router-link>
    35.         <router-link to="/login">登录</router-link>
    36.         <router-link to="/user">用户</router-link>
    38.         <!-- 步骤六: 在根组件模板中, 添加路由出口: 路由组件渲染的位置 -->
    39.         <router-view></router-view>
    40.         <!-- 路由切换类似于动态组件,可以使组件销毁和创建, 保留数据可用keep-alive -->
    41.         <keep-alive>
    42.             <router-view></router-view>
    43.         </keep-alive>
    44.         <!-- 组件切换时,添加动画效果, 并保留组件数据  记住:transition在外 -->
    45.         <transition>
    46.             <keep-alive>
    47.                 <router-view></router-view>
    48.             </keep-alive>
    49.         </transition>
    50.     </div>
    51.     <script>
    52.         // 步骤三: 创建路由控制分发跳转的组件
    53.         var MainPage = Vue.component("mainCom", { template: "<h1>这是主页</h1>" });
    54.         var LoginPage = Vue.component("loginCom", { template: "<h1>这是登录页<input></h1>" });
    55.         var UserPage = Vue.component("userCom", { template: "<h1>这是用户页</h1>" });
    56.         // Vue.component 返回值是组件的构造函数
    57.         console.log(MainPage, LoginPage, UserPage)
    58.         // 步骤四: 创建路由对象,配置路由信息
    59.         const router = new VueRouter({
    60.             // 在routes子字段下配置路由, 一个对象就一个路径的信息, 
    61.             // path路径对应的是hash值,省略#, 一般以/开头
    62.             // component 值是路由对应的组件构造函数, 不是组件名
    63.             routes: [
    65.                 { path: "/main", component: MainPage },
    66.                 { path: "/login", component: LoginPage },
    67.                 { path: '/user', component: UserPage },
    68.                 // 启动项目时,默认路径是/ , 可以把/这个路径绑定为主页
    69.                 {
    70.                     path: "/",
    71.                     // 路由重定向, 可以修改路由跳转路径
    72.                     redirect: "/main"
    73.                 },
    74.             ]
    75.         })
    77.         new Vue({
    78.             el: '#myApp',
    79.             // 步骤五: 把路由对象加入vue对象中
    80.             router,
    81.             data: {}
    82.         })
    83.     </script>
    84. </body>