master

分支 (1)

管理

管理

master

learn-vue
/
demo_028.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <!-- 一旦引入vue-router，在浏览器的内存中，就会多一个构造器：VueRouter-->
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
</head>
<body>
    <div id="app">

        <a href="#/login">去登录</a>
        <a href="#/register">去注册</a>

        <!--
            占位符，该位置专门用来显示，路由对象中注册过的组件
            究竟显示哪一个组件，就取决于url地址了。
        -->
        <router-view></router-view>
    </div>

    <template id="t1">
        <div>
            登录UI
        </div>
    </template>

    <template id="t2">
        <div>
            注册UI
        </div>
    </template>

    <script>

        /*
            路由：就是选择的意思。Vue的路由，只是概念上的路由。
            Vue的路由，就是用来选择组件（切换组件的）。

            有了Vue的路由以后，就不再将组件注册在Vue父组件中了，而是将组件注册给Vue的路由器对象！
            而且是一边注册组件，一边写出组件对应的路径。

            最后，将路由器对象，整个注册给Vue父组件。


            路由运行原理：
            1. 浏览器地址栏发生变化
            2. Vue路由器就会“感知”这个地址的变化，并且拿着新的地址，去与路由中所注册的地址比较
            3. 如果找到匹配的地址了，就能找到对应的组件，就进入下一步。 如果找不到，就不显示任何内容。
            4. 再找到组件的上一级组件，并且在上级组件中找位置，位置就是<router-view>标记，然后就显示。
        */

        // 这里是定义组件
        var loginComponent = {
            template: "#t1"
        };

        var registerComponent = {
            template: "#t2"
        }

        var router = new VueRouter({
            // 在路由器对象中，注册组件
            routes: [
                {component: loginComponent, path: "/login"},
                {component: registerComponent, path: "/register"}
            ]
        });


        var app = new Vue({
            el: "#app",
            "router": router
        });
    </script>

</body>
</html>