Vue.js-Vue-router的基本使用

最新推荐文章于 2024-09-11 17:04:07 发布

JunSIr_#

最新推荐文章于 2024-09-11 17:04:07 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： java vue web javascript router

本文链接：https://blog.csdn.net/JunSIrhl/article/details/105804299

版权

本文介绍了在Vue.js项目中使用Vue-router进行页面路由管理，以实现登录和注册页面的动态加载和切换。通过创建VueRouter对象，定义路由规则，将组件与路径绑定，从而达到组件根据路由变化而显示的效果。强调了路由对象必须在Vue实例下方创建，以及单页应用中页面切换实则是hash值的变化而非实际页面跳转。

摘要由CSDN通过智能技术生成

第一：

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