前端路由
什么是单页应用
单页应用(single page web application，SPA)，是在一个页面完成所有的业务功能，浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面完成，这一切都由JavaScript来控制。
单页应用优缺点
- 优点
- 操作体验流畅
- 完全的前端组件化
- 缺点
- 首次加载大量资源(可以只加载所需部分)
- 对搜索引擎SEO不友好 -> 服务端渲染
- 开发难度相对较高
单页应用的实现原理
前后端分离(后端专注于数据、前端专注于交互和可视化) 前端路由
Hash路由
- 利用URL上的hash，当hash改变不会引起页面刷新，所以可以利用 hash 值来做单页面应用的路由， 并且当 url 的 hash 发生变化的时候，可以触发相应 hashchange 回调函数。
- 模拟实现:
<a href="#/">首页</a>
<a href="#/users">用户管理</a>
<a href="#/rights">权限管理</a>
<a href="#/goods">商品管理</a>
<div id="box">
</div>
<script>
var box = document.getElementById('box');
window.onhashchange = function() {
// #/users
var hash = location.hash;
hash = hash.replace('#', '');
switch (hash) {
case '/':
box.innerHTML = '这是首页';
break;
case '/users':
box.innerHTML = '这是用户管理';
break;
case '/rights':
box.innerHTML = '这是权限管理';
break;
}
};
</script>History路由
- History 路由是基于 HTML5 规范，在 HTML5 规范中提供了 history.pushState || history.replaceState 来进行路由控制
vue-router
Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌 实现根据不同的请求地址 而显示不同的组件
快速体验
导入vue和vue-router
设置HTML中的内容
代码语言：javascript复制<!-- router-link 最终会被渲染成a标签，to指定路由的跳转地址 -->
<router-link to="/users">用户管理</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>创建组件
代码语言：javascript复制// 创建组件
// 组件也可以放到单独的js文件中
var Home = {
template: '<div>这是Home内容</div>'
};
var Users = {
template: '<div>这是用户管理内容</div>'
};配置路由规则
代码语言：javascript复制// 配置路由规则
var router = new VueRouter({
routes: [
{ name: 'home', path: '/', component: Home },
{ name: 'users', path: '/users', component: Users }
]
});设置vue的路由选项
代码语言：javascript复制var vm = new Vue({
el: '#app',
router
});动态路由
场景: 不同的path对应同一个组件
注意: 变化的路由 改成 :参数
此时可以通过路由传参来实现，具体步骤如下：
路由规则中增加参数，在path最后增加 :id
代码语言：javascript复制{ name: 'users', path: '/users/:id', component: Users },通过 传参，在路径上传入具体的值
代码语言：javascript复制<router-link to="/users/120">用户管理</router-link>在组件内部可以使用，this.$route 获取当前路由对象
代码语言：javascript复制var Users = {
template: '<div>这是用户管理内容 {{ $route.params.id }}</div>',
mounted() {
console.log(this.$route.params.id);
}
};路由嵌套
代码语言：javascript复制如果存在组件嵌套,就需要提供多个视图容器 同时,router-link和router-view 都可以添加类名、设定样式
<div id="app">
<!--router-link运行后会自动变成a标签-->
<nav>
<router-link to="/top">热点</router-link>
<router-link to="/tech">教育</router-link>
<router-link to="/soc">社会</router-link>
<router-link to="/mus">音乐</router-link>
<router-link to="/te">体育</router-link>
</nav>
<!--容器-->
<router-view class="box">
</router-view>
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 组件:
// 热点
var Top = {
template: '<h1>Top</h1>'
};
// 体育:带参数的二级路由
var Te = {
template: `
<div>
<ul>
<li><router-link to='/te/basb/10'>篮球</router-link></li>
<li><router-link to='/te/fotb/10'>足球</router-link></li>
<li><router-link to='/te/mbal/10'>好多球</router-link></li>
</ul>
<router-view class="box"></router-view>
</div>
`
};
// 教育:使用了data
var Tech = {
data: function() {
return {
name: "luck",
age: 10,
fn: function() {
alert(1);
}
}
},
template: `
<div>
<p @click="fn">{{name}}</p>
<p>{{age}}</p>
</div>
`
}
// 社会
var Soc = {
template: '<h1>soc</h1>'
};
// 音乐:不带参数的二级路由
var Mus = {
// template: '<h1>mus</h1>'
template: `
<div>
<ul>
<li><router-link to='/mus/pop'>流行</router-link></li>
<li><router-link to='/mus/tra'>古典</router-link></li>
<li><router-link to='/mus/roc'>摇滚</router-link></li>
</ul>
<router-view class="box"></router-view>
</div>
`
};
// 音乐:二级路由的视图
var Pop = {
template: '<h3>mus下的pop模块</h3>'
};
// 体育:二级路由的视图
var Ball = {
//路由参数 $route.params
template: "<h3>{{$route.params}}</h3>"
};
// 配置路由
var routes = [
// 热点
{
path: '/top',
component: Top
},
// 教育
{
path: '/tech',
component: Tech
},
// 社会
{
path: '/soc',
component: Soc
}, {
path: '/mus',
component: Mus,
//子路由配置
children: [{
path: 'pop',
component: Pop,
}]
},
// 体育
{
path: '/te',
component: Te,
children: [{ // /te/形参/10
path: ':cate/10',
component: Ball
}]
},
//重定向:默认或者404界面
{
path: '*',
redirect: '/top'
}
];
// 实例化路由
var router = new VueRouter({
// routes : routes
routes
});
// 实例化vue
var vue = new Vue({
el: '#app',
// router : router
router
});
</script>
