前面的内容呢,主要是在工作中主要是使用vue的,而这玩意用的久了,一些基础性的东西忘得就差不多了,所以一边复习复习,一边写成博客,加深印象,现在开始也写写的好伙伴vue的文章。
vue-router
前端的小伙伴们,对vue全家桶肯定是不陌生的,就算没用过也应该听过,而vue-router也是构建spa不可缺少的一份子,先简单说说用法。
首先使用命令行工具
npm:
npm install vue-router
yarn:
yarn add vue-router
我的习惯是在根目录下建新一个router.js
import Vue from 'vue' // 引入vue
import Router from 'vue-router' // 引入vue-router
// vue使用Router
Vue.use(Router)
// 引入组件
const Index form '@/view/index'
const About form '@/view/index'
// new一个router实例
const router = new Router({
mode: 'hash', // 路由模式还有'history'
// 定义路由列表
routes: [
{
path: '/',
name: 'index',
component: Index,
},
{
path: '/about',
name: 'about',
component: About
}
]
})
export default router
最后在main.js里引入
import router from './index'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
当然这只是一个简单的应用,为什么是简单的应用呢,因为我的router解析就只到这里,
ok我们开始解析:
hash模式
首先我们要知道hash路由的底层原理就是hashchange,我还是直接上代码:
html部分
<div class="headr-nav">
<ul>
<li class="nav-item">
<!-- 路由跳转的按钮 -->
<a href="#/" class="router-link">首页</a>
</li>
<li class="nav-item">
<a href="#/about" class="router-link">关于</a>
</li>
</ul>
</div>
<!-- 路由页面的容器-->
<div class="router-view">
</div>
js部分
// 首先获取路由页面的容器
var routerView = document.getElementsByClassName('router-view')[0];
// 路由跳转的按钮
var routerLink = document.getElementsByClassName('router-link');
// 路由切换的方法
function changeContent(href) {
switch (href) {
case undefined:
routerView.innerHTML = `<div class="admin">
我是首页
</div>`;
break;
case '/':
routerView.innerHTML = `<div class="admin">
我是首页
</div>`;
break;
case '/about':
routerView.innerHTML = `<div class="about">
关于我们
</div>`;
break;
}
}
// 页面加载完成后先调用一次
changeContent(location.hash.split('#')[1]);
// 监视hashchange事件当hash值变化时调用changeContent方法
window.addEventListener('hashchange', function (e) {
var newHref = e.newURL.split('#')[1];
changeContent(newHref);
});
ok就这么简单,然后人们发现那个#好丑我们就来看看history模式:
history模式
vue-router的history模式的底层原理是h5中提出的history.pushState,这也是为什么history模式的支持度非常不好,废话不多说,上代码:
html部分
<div class="headr-nav">
<ul>
<li class="nav-item">
<a href="/" class="router-link">首页</a>
</li>
<li class="nav-item">
<a href="/about" class="router-link">关于</a>
</li>
</ul>
</div>
<div class="router-view">
</div>
哎呦好像一样
js部分:
// 首先获取路由页面的容器
var routerLink = document.querySelectorAll('a');
// 路由跳转的按钮
var routerView = document.getElementsByClassName('router-view')[0];
// 路由切换的方法
function changeContent(href) {
switch (href) {
case '/':
routerView.innerHTML = `<div class="admin">
我是首页
</div>`;
break;
case '/about':
routerView.innerHTML = `<div class="about">
关于我们
</div>`;
break;
}
}
// 初始行为
changeContent(location.pathname);
for (var i = routerLink.length - 1; i >= 0; i--) {
routerLink[i].addEventListener('click', function (e) {
// 首先要阻止点击的默认事件
e.preventDefault();
// 获取到元素的 href值
var href = e.target.getAttribute('href');
// 把该值push的地址栏这样可以不发生真正跳转,浏览器访问记录里还会加一条访问记录,主要是可以返回前进
history.pushState({}, '', href);
// 调用切换页面方法
changeContent(href);
});
}
注意:history模式要服务器支持,其实呢也很简单,就是无论如何都返回index.html。
服务器代码:
const http = require('http');
const fs = require('fs');
const httpPort = 80;
http.createServer((req, res) => {
fs.readFile('./vueHistory.html', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.');
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
});
res.end(content);
});
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort);
})
ok完成了。
展示连接hash:http://www.fgdemoshow.cn/smallDemo/js/vueRouterHash,
展示连接history:http://www.fgdemoshow.cn/smallDemo/js/vueRouterHistory
github: https://github.com/lifei5859/vue-router-demo.git