1.在IDEA中建立:
(1)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> <!--<loginForm></loginForm>--> <!-- 疑问:为什么不采用上面的写法? 由于html是大小写不敏感的,如果采用上面的写法,则被认为是<loginform></loginform> 所以,如果是驼峰形式的组件,需要把驼峰转化为“-”的形式 --> <login-form></login-form> <register-form></register-form> </div> </div> </body> <script src="../node_modules/vue/dist/vue.js"></script> <script src="js/login.js"></script> <script src="js/register.js"></script> <script> var vm = new Vue({ el: "#app", components: { loginForm:loginForm, registerForm:registerForm } }) </script> </html>
(2)js目录下的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> \ 用 户 名:<input type="text"><br/>\ 密  码:<input type="password"><br/>\ 确认密码:<input type="password"><br/>\ </div>\ ' }
我们期待的是,当点击登录或注册按钮,分别显示登录页或注册页,而不是一起显示。但是,如何才能动态加载组件,实现组件切换呢?虽然使用原生的Html5和JS也能实现,但是官方推荐我们使用vue-router模块。
2.vue router的安装
安装命令:npm install vue-router --save
3.vue router的使用过程
(1)在index.html中引入依赖:
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
(2)新建vue-router对象,并且指定路由规则:
有几个组件,就写几个路由,在这个例子中只有登录和注册两个组件。
// 创建VueRouter对象 const router = new VueRouter({ routes:[ // 编写路由规则 { path:"/login", // 请求路径,以“/”开头 component:loginForm // 组件名称 }, { path:"/register", component:registerForm } ] })
(3)在父组件中引入router对象:黄色的部分可以去掉
var vm = new Vue({
el: "#app",
components: {
loginForm:loginForm,
registerForm:registerForm
},
router // 引用上面定义的router对象
})
(4).页面跳转控制:
<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>
-
通过
<router-view>
来指定一个锚点,当路由的路径匹配时,vue-router会自动把对应组件放到锚点位置进行渲染 -
通过
<router-link>
指定一个跳转链接,当点击时,会触发vue-router的路由功能,路径中的hash值会随之改变
(5)运行结果截图:
事实上,我们总共就一个HTML:index.html