Vue.js最终序曲-Vue-router（Vue路由）

第一序：

Vue入门

第二序：

Vue指令

第三序：

Vue组件

模拟

现在我们来实现这样一个功能：

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换

编写父组件

为了让接下来的功能比较清晰，我们先新建一个文件夹：src

然后新建一个HTML文件，作为入口：index.html

编写页面的基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span>登录</span>
    <span>注册</span>
    <hr/>
    <div>
        登录页/注册页
    </div>
</div>
</body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app"
    })
</script>

</html>

样式：

编写登陆及注册组件：

接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js：

编写组件，这里我们只写模板，不写功能

const loginForm = {
    template:'\
    <div>\
    <h2>登录页</h2> \
    用户名：<input type="text"><br/>\
    密码：<input type="password"><br/>\
    </div>\
    '
}

const registerForm = {
    template:'\
    <div>\
    <h2>注册页</h2> \
    用&ensp;户&ensp;名：<input type="text"><br/>\
    密&emsp;&emsp;码：<input type="password"><br/>\
    确认密码：<input type="password"><br/>\
    </div>\
    '
}

在父组件中引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span>登录</span>
    <span>注册</span>
    <hr/>
    <div>
        <!--<loginForm></loginForm>-->
        <!--
            疑问：为什么不采用上面的写法？
            由于html是大小写不敏感的，如果采用上面的写法，则被认为是<loginform></loginform>
            所以，如果是驼峰形式的组件，需要把驼峰转化为“-”的形式
         -->
        
        <login-form></login-form>
        <register-form></register-form>
    </div>
</div>
</body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入我们刚才定义的login.js与register.js-->
<script src="user/login.js"></script>
<script src="user/register.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        /*定义实例的组件*/
        components: {
            loginForm,
            registerForm
        }
    })
</script>

</html>

效果：

我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

但是，如何才能动态加载组件，实现组件切换呢？

虽然使用原生的Html5和JS也能实现，但是官方推荐我们使用vue-router模块。

新建vue-router对象，并且指定路由规则：

html中

    // 创建VueRouter对象
    const router = new VueRouter({
        routes:[ // 编写路由规则
            {
                path:"/login", // 请求路径，以“/”开头
                component:loginForm // 组件名称
            },
            {
                path:"/register",
                component:registerForm
            }
        ]
    })

注意，路由对象一定在放在实例的下方！！

创建VueRouter对象，并指定路由参数
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
- path：路由的路径
- component：组件名称

在实例中引入router对象：

    var vm = new Vue({
        el: "#app",
        /*定义实例的组件*/
        components: {
            loginForm,
            registerForm
        },
        router //引用router对象
    })

页面跳转控制：

<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
    <!--router-link来指定跳转的路径-->
    <span><router-link to="/login">登录</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr/>
    <div>
        <!--vue-router的锚点-->
        <router-view></router-view>
    </div>
</div>
</body>

效果：

注意：单页应用中，页面的切换并不是页面的跳转，仅仅是地址最后的hash值变化。

事实上，我们总共就一个HTML：index.html。

JunSIr_deCp

原创文章 197 获赞 142 访问量 6万+

关注私信

Vue.js最终序曲-Vue-router（Vue路由）

Vue.js最终序曲-Vue-router（Vue路由）

模拟

猜你喜欢