Vue
/
0.36路由的基本使用.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./lib/vue-2.4.0.js"></script>
        <!-- 1.引用vue-router路由模块 -->
        <script src="./lib/vue-router-3.0.1.js"></script>
        <style>
            .router-link-active {
                font-size: 40px;
                color: hotpink;
                margin: 0 25px;
            }
            .myactive{
                font-size: 50px;
                color: green;
            }
            .v-enter,
            .v-leave-to{
                transform: translateX(150px);
                opacity: 0;
            }
            .v-enter-active,
            .v-leave-active{
                transition: all 0.8s ease;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- <a href="#/login">登陆</a>
            <a href="#/register">注册</a> -->

            <!-- router-link：官方提供的跳转标签，默认的时a标签，可以通过tag改变标签属性 -->
            <router-link to="/login" tag="button">登陆</router-link>
            <router-link to="/register" tag="button">注册</router-link>

            <!-- 这是vue-router提供的专门用来当作占位符的元素 -->
            <transition mode="out-in">
                <router-view></router-view>
            </transition>
        </div>

        <script>
            const login ={
                template:'<h1>憨憨</h1>'
            }
            const register ={
                template:'<h1>二丫</h1>'
            }
            //2.创建一个路由对象，当导入vue-router之后，在window全局对象中
            //就有一个 路由构造函数 叫做：VueRouter
            //在new路由对象的时候，可以为构造函数，传递一个配置对象
            const routerObj = new VueRouter({
                //rout 这个配置对象中的 route表示 路由匹配规则 的意思
                //两个属性：path：表示监听哪个路由链接地址
                //component：表示如果路由是前面匹配到的 path ，
                //则展示 component 属性对应的那个组件
                //需要注意： component 的属性值，必须是一个 组件的模板对象，
                //不能是 组件的引用名称；
                routes:[
                    {path:'/',redirect:'/login'},//redirect：重新定向
                    {path:'/login',component:login},
                    {path:'/register',component:register}
                ],
                // linkActiveClass: 'myactive',
            })
            var vm = new Vue({
                el: '#app',
                data: {

                },
                methods: {

                },
                // 将路由规则对象，注册到 vm 实例上，
                //用来监听 URL 地址的变化，然后展示对应的组件
                router: routerObj


            })
        </script>
    </body>
</html>