vue——35-路由的基本使用

引用

    <!-- 1.安装 vue-router 路由模块 -->
    <script src="../frame/vue-router.js"></script>

css

        .myactive {
            color: red;
            font-weight: 800;
            font-style: italic;
            font-size: 20px;
            margin: 0 10px 0 10px;
        }

        span {
            cursor: default;
        }
        
        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }

        .v-enter-active, .v-leave-active {
            transition: all 1s ease;
        }

        .v-move {
            transition: all 1s ease;
        }

        .v-leave-active {
            position: absolute;
        }

html

<div id="app">
    <!--不推荐-->
    <!--<a href="#/login">登录</a>-->
    <!--<a href="#/register">注册</a>-->

    <!-- 6.推荐 且 router-link 默认渲染为 a 标签-->
    <!--且将 router-link 用 tag 定义为其他标签，还是有点击触发切换的效果-->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register" tag="span">注册</router-link>
    
    <!-- 9.动画 -->
    <transition>
    <!-- 5.这是 vue-router 提供的元素，专门用来当作占位符的，将来，路由规则，匹配到的组
    件，就会展示到这个 router-view 中去，所以：我们可以把 router-view 认为是一个占位符 -->
        <router-view></router-view>
    </transition>
</div>

js

        // 3.组件的模板对象
        let login = {
            template: '<h1>登录组件</h1>'
        };

        let register = {
            template: '<h1>注册组件</h1>'
        };

        // 2. 创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，
        // 就有了一个路由的构造函数叫做 VueRouter
        // 在 new 路由对象的时候，可以为构造函数，传递一个配置对象
        let routerObj = new VueRouter({
            // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
            routes: [//路由匹配规则
                // 3.每个路由规则，都是一个对象，这个规则对象身上，有两个必须的属性；
                // 属性1：path ，表示监听的那个路由链接地址；
                // 属性2：component ，表示匹配到 path ，则展示 component 属性对应的组件
                // 注意：component 的属性值，必须是一个组件模板对象（login），
                // 不能是组件的引用名称（'login'）
                {path: '/login', component: login},
                {path: '/register', component: register},

                // 7.redirect 重定向根路径
                {path: '/', redirect: '/login'}
            ],
            
            // 8.高亮
            // 设置 router-link 每次点击时会自动添加给它的 class 名
            // （默认添加的是：router-link-active）
            linkActiveClass: 'myactive'
        });

        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            // 4.将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
            router: routerObj
        });