5. 前端框架—Vue路由
程序员文章站
2022-06-19 15:41:08
文章目录前端框架—Vue路由router1. 场景模拟1.1.编写父组件1.2 编写登录及注册组件login.js内容register.js内容1.3 在父组件中引用1.4 存在的问题2. vue-router简介和安装3. vue-router快速入门3.1 在父组件中引入router对象3.2 页面跳转控制3.3 效果4. vue-router案例☆前端框架—Vue路由router1. 场景模拟一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：1.1.编写父组件入口：ind...
文章目录
前端框架—Vue路由router
1. 场景模拟
一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：
1.1.编写父组件
入口：index.html
<div id="app">
<span>登录</span>
<span>注册</span>
<hr/>
<div>
登录页/注册页
</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app"
})
</script>
1.2 编写登录及注册组件
接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js- 编写组件，这里我们只写模板，不写功能。
login.js内容
const loginForm ={
template:' <div>\n' +
' <h2>登录页</h2>\n' +
' 用 户 名：<input type="text"><br/>\n' +
' 密  码：<input type="text"> <br/>\n' +
' </div>'
};
register.js内容
const registerForm ={
template:' <div>\n' +
' <h2>注册页</h2>\n' +
' 用 户 名：<input type="text"><br/>\n' +
' 密  码：<input type="text"> <br/>\n' +
' 确认密码：<input type="text">\n' +
' </div>'
};
1.3 在父组件中引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="login.js"></script>
<script src="register.js"></script>
</head>
<body>
<div id="app">
<!--
不能采用<loginForm>这样的写法
因为html中大小写不敏感，会被识别成<loginform>
于是我们采用驼峰式命名法
-->
<login-form></login-form>
<register-form></register-form>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
num:0
},
methods: {
},
components:{
loginForm:loginForm,
registerForm:registerForm
}
});
</script>
</html>
效果：
1.4 存在的问题
我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。
但是，如何才能动态加载组件，实现组件切换呢？虽然使用原生的html5和js也能实现，但是官方推荐我们使用vue-router模块。
2. vue-router简介和安装
使用vue-router和vue可以非常方便的
实现 复杂单页应用的动态路由功能。使用npm安装：
npm install vue-router --save
<!--在index.html中引入依赖-->
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
3. vue-router快速入门
新建vue-router对象，并且指定路由规则：
- 创建VueRouter对象，并指定路由参数
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
- path：路由的路径
- component：组件名称
// 创建VueRouter对象
const router = new VueRouter({
routes:[ // 编写路由规则
{
path:"/login", // 请求路径，以“/”开头
component:loginForm // 组件名称
},
{
path:"/register",
component:registerForm
}
]
})
3.1 在父组件中引入router对象
var vue = new Vue({
el:"#app",
components:{// 引用登录和注册组件
loginForm,
registerForm
},
router:router // 引用上面定义的router对象
})
3.2 页面跳转控制
- 通过
<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染- 通过
<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变
<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>
3.3 效果
注意：单页应用中，
页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>router</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script src="login.js"></script>
<script src="register.js"></script>
</head>
<body>
<div id="app">
<span><router-link to="/login">登录</router-link></span>
<span><router-link to="/register">注册</router-link></span>
<hr/>
<!--vue中router的锚点-->
<router-view></router-view>
</div>
</body>
<script>
const router = new VueRouter({
//编写路由规则
routes:[
{
//请求路径必须包括 "/"
path:"/login",
//组件名称
component:loginForm
},
{
path:"/register",
//组件名称
component:registerForm
}
]
});
var vue = new Vue({
el: "#app",
data: {},
methods: {},
router:router,
});
</script>
</html>
4. vue-router案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<!-- 需要先引入vue再引入vue-router -->
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
// 现在，应用已经启动了！
</script>
</body>
</html>
☆
本文地址：https://blog.csdn.net/weixin_45267102/article/details/109625345