Vue前端路由的单页应用vue-router
2018-08-26 本文已影响42人
昊啊昊儿哟
什么是单页应用?
单页应用(single page web application，SPA)，是在一个页面完成所有的业务功能，浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面完成，这一切都由JavaScript来控制。
-
单页应用优缺点
-
优点
-
操作体验流畅
-
完全的前端组件化
-
-
缺点
-
首次加载大量资源(可以只加载所需部分)
-
对搜索引擎不友好
-
开发难度相对较高
-
-
单页应用的原理
- Hash路由
- 利用URL上的hash，当hash改变不会引起页面刷新，所以可以利用 hash 值来做单页面应用的路由，
并且当 url 的 hash 发生变化的时候，可以触发相应 hashchange 回调函数。 - 模拟实现
- 利用URL上的hash，当hash改变不会引起页面刷新，所以可以利用 hash 值来做单页面应用的路由，
var app = document.getElementById('app');
window.onhashchange = function () {
var hash = location.hash.replace('#', '');
switch (hash.toLowerCase()) {
case '/':
app.innerHTML = '首页内容';
break;
case '/users':
app.innerHTML = '用户管理内容';
break;
……
}
};
History路由
- History 路由是基于 HTML5 规范，在 HTML5 规范中提供了 history.pushState || history.replaceState 来进行路由控制。
vue-router
快速体验
- 导入vue和vue-router
- 设置HTML中的内容
<!-- router-link 最终会被渲染成a标签，to指定路由的跳转地址 -->
<router-link to="/users">用户管理</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
3.创建组件
// 创建组件
// 组件可以放到单独的js文件中
var Home = {
template: '<div>这是Home内容</div>'
};
var Users = {
template: '<div>这是用户管理内容</div>'
};
4.配置路由规则
// 配置路由规则
var router = new VueRouter({
routes: [
{ name: 'home', path: '/', component: Home },
{ name: 'users', path: '/users', component: Users }
]
});
5.设置vue的路由选项
var vm = new Vue({
el: '#app',
router
});
动态路由匹配
假设有一个用户列表，想要删除某一个用户，需要获取用户的id传入组件内，如何实现呢？
此时可以通过路由传参来实现，具体步骤如下：
- 路由规则中增加参数，在path最后增加 :id
{ name: 'users', path: '/users/:id', component: Users },
2.通过 <router-link> 传参，在路径上传入具体的值
<router-link to="/users/120">用户管理</router-link>
3.在组件内部可以使用，this.$route 获取当前路由对象
var Users = {
template: '<div>这是用户管理内容 {{ $route.params.id }}</div>',
mounted() {
console.log(this.$route.params.id);
}
};
vue-router的具体使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.router-link-active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- <li><a href="#/login">登录</a></li>
<li><a href="#/register">注册</a></li> -->
<li><router-link to="/login">登录</router-link></li>
<li><router-link to="/register">注册</router-link></li>
<!-- 设置两个路由的入口： Login / regiester -->
<!-- 将来路由中的组件中的内容会被动态渲染到这个标签中 -->
<router-view></router-view>
</ul>
</div>
</body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<!-- 要使用vue-router需要单独引入vue-router -->
<script>
// 注册路由：
// 1.0 设置路由对应的组件
var login = {
template: "<div>我是登录页面</div>"
}
var register = {
template: "<div>我是注册页面</div>"
}
// 2.0 定义一个路由对象：
var router = new VueRouter({
routes: [
// 定义路由
{name: "login", path: "/login", component: login},
// 这个路由名称为login,请求的路径为/login，如果将来请求这个路径，
// 那么会将login对应的组件中的内容响应到页面上，
// 响应到页面的叫做 <router-view></router-view>的标签
{name: "register", path: "/register", component: register}
]
});
// 3.0 要将设置好的路由对象注册到Vue对象
var vm = new Vue({
el: "#app",
data: {
},
// router: router
router
});
</script>
</html>
更多详情可以参考vue官网对路由的使用:https://router.vuejs.org/zh/
