效果图
点击登录和注册可以进行页面切换
组件要求
- login.js登录页组件
- register.js注册页组件
- index.html主页面
编码步骤
- 安装vue,vue-router；创建index.html、login.js、register.js文件
- 将vue.js、vue-router.js、login.js、register.js按顺序引入index.html中
- 编写login.js和register.js中的组件内容
- 在index.html中创建vue实例
- 创建vue-router实例，引用login.js和register.js中组件
- 编写<router-link to="">页签和<router-view>锚点
- 将vue-router实例和vue实例关联
- 配置默认路由
代码示例
index.html
单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content">
<!--指定跳转路径,默认是a标签-->
<span><router-link to="/login">登录</router-link></span>
<span><router-link to="/register">注册</router-link></span>
<hr>
<!--锚点,用来显示组件内容-->
<router-view></router-view>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script src="src/js/login.js"></script>
<script src="src/js/register.js"></script>
<script>
//创建vue-router实例
const router =new VueRouter({
routes:[
{
path: '/', //默认路由
redirect: 'login' //默认路由路径
},{
path:"/login", //路由路径
component: loginForm //引用login.js中组件
},{
path:"/register",
component: registerForm //引用register.js中组件
}]
})
const app=new Vue({
el: "#content",
router //将router与vue关联
})
</script>
</html>
login.js
&emsp；代表一个汉字
&ensp；代表半个汉字
const loginForm={ template: `<div> <h1>登录</h1> 用户名：<input id="username"><br> 密 码：<input id="password"> <input type="button" value="登录"> </div>` }
register.js
const registerForm={ template: `<div> <h1>注册</h1> 用 户 名：<input id="username"><br> 密  码：<input id="password"><br> 确认密码：<input id="password"> <input type="button" value="注册"> </div>` }