Vue——路由使用
效果图
点击登录和注册可以进行页面切换
组件要求
- 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>` }