① 引入vue-router模块;
import Router from 'vue-router'
② 引入Vue并使用vue-router,即所谓的安装vue-router插件
import Vue from 'vue'
Vue.use(Router)
③ 创建路由对象并对外暴露
④ 配置路由对象,即在创建路由对象的时候传递一个options参数,里面主要包括mode(路由模式)、routes(路由表)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
});
① hash路由
// index.html
<a href="#/home">Home</a>
<a href="#/about">About</a>
<div id="content"></div> <!--显示路由内容区域-->
window.addEventListener("hashchange", () => {
content.innerHTML = location.hash.slice(1); // 监听到hash值变化后更新路由显示区内容
});
② history路由
// index.html
<a onclick="go('/home')">Home</a>
<a onclick="go('/about')">About</a>
<div id="content"></div>
function go(path) {
history.pushState({title:path.slice(1), path}, path.slice(1), path);
content.innerHTML = path;
}
window.addEventListener("popstate", () => { // 监听到路由变化后再次调go()方法更新路由显示区内容
go(location.pathname);
});
① 在路由插件中声明一个VueRouter类,因为我们使用vue-router的时候,是先引入路由插件,然后通过路由插件去new出一个router对象,所以引入的路由插件是一个类,同时在创建router对象的时候需要传递一个options参数配置对象,有mode和routes等属性配置,如:
// vue-router.js
class VueRouter { // VueRouter实际上是一个function,也可以看做是一个对象
constructor(options) {
this.mode = options.mode || '';
this.routes = options.routes || [];
}
static install(Vue) { // 添加一个静态的install方法,该方法执行的时候会传入Vue构造函数
// 这里主要是给所有Vue实例添加一些属性等操作
}
}
export default VueRouter;
class VueRouter {}
const install = () => {}
export default { // 导出插件对象
VueRouter,
install // 导出的插件对象中必须要有一个install方法
}
// 使用的时候也要进行相应的变化,如:
import rt from "./vue-router"
Vue.use(rt);
const router = new rt.VueRouter({});
② 创建路由表对象,我们要根据路径的变化动态渲染出相应的组件,所以为了方便,我们需要构造一个路由表对象,其属性为路径,属性值为组件,这样当路径发生变化的时候,我们可以直接通过路由表对象获取到对应的组件并渲染出来
this.routesMap = this.createMap(this.routes); // 给VueRouter类添加一个routesMap属性,用于保存构建的路由表对象
createMap(routes) { // 通过传递进来的routes构建路由表对象
return routes.reduce((result, current) => {
result[current.path] = current.component;
return result;
}, {});
}
③ 保存当前路由,我们可以创建一个对象用于专门保存当前路由信息,我们只需要去更改当前路由信息,就可以动态渲染出相应的路由视图了,如:
class CurrentRoute { // 创建一个类,专门用于保存当前路由信息,同时方便在当前路由对象上添加属性和方法
constructor() {
this.path = null; // 添加一个path属性保存当前路由的路径
}
}
this.currentRoute = new CurrentRoute();// 给VueRouter添加一个currentRoute属性,保存当前路由信息对象
④ 执行init()方法进行路由初始化,就是根据当前url地址进行判断,如果页面一加载什么路径都没有,那么就跳转到"/"首页,如果路径变化则保存当前路由信息,如:
init() { // 初始化路由信息
if (this.mode === "hash") { // 如果是hash路由
if (location.hash) { // 如果页面一加载的时候就有hash值
this.currentRoute.path = location.hash.slice(1); // 保存当前路由的路径
} else { // 如果页面一加载的时候没有hash值
location.hash = "/"; // 跳转到首页"/",即在url地址末尾添加"#/"
}
window.addEventListener("hashchange", () => { // 监听浏览器地址栏hash值变化
this.currentRoute.path = location.hash.slice(1); // hash改变,同样更新当前路由信息
});
} else { // 如果是history路由
if (location.pathname) { // 如果页面一加载的时候就有pathname值
this.currentRoute.path = location.pathname; // 保存当前路由的路径
} else { // 如果页面一加载的时候没有pathname值
location.pathname = "/"; // 跳转到首页"/",即在域名地址末尾添加"/"
}
window.addEventListener("popstate", () => { // 监听点击浏览器前进或后退按钮事件
this.currentRoute.path = location.pathname;
});
}
}
⑤ 在每个Vue实例上都添加上$router和$route属性
static install(Vue) { // install方法执行的时候会传入Vue构造函数
Vue.mixin({ // 调用Vue的mixin方法在每个Vue实例上添加一个beforeCreated钩子
beforeCreate () {
if (this.$options && this.$options.router) { // 如果是根组件,那么其options上就会有router属性
this._router = this.$options.router;
} else { // 非根组件
this._router = this.$parent && this.$parent._router; // 从其父组件上获取router
}
Object.defineProperty(this, "$router", { // 给每个Vue实例添加$router属性
get() { // 返回VueRouter实例对象
return this._router;
}
});
Object.defineProperty(this, "$route", { // 给每个Vue实例添加$route属性
get() {
return { // 返回一个包含当前路由信息的对象
path: this._router.currentRoute.path
}
}
});
}
});
}
⑥ 注册router-link和router-view组件
static install(Vue) {
Vue.component("router-link", { // 全局注册router-link组件
props: {
to: {
type: String,
default: "/"
}
},
methods: {
handleClick(e) {
if (this._router.mode === "history") { // 如果是history路由
history.pushState({}, null, this.to); //通过pushState()方法更新浏览器地址栏路径,不会刷新页面
this._router.currentRoute.path = this.to; // 点击链接后更新当前路由路径
e.preventDefault(); // 阻止<a>标签的默认行为,防y页面默认跳刷新s页面
}
}
},
render() {
const mode = this._router.mode; // 当前<router-link>组件上也会注入_router属性从而可以获取到路由的mode
return <a on-click={this.handleClick} href={mode === "hash" ? `#${this.to}` : this.to}>{this.$slots.default}</a>;
}
});
Vue.component("router-view", { // 全局注册router-view组件
render(h) {
const currentPath = this._router.currentRoute.path;
const routesMap = this._router.routesMap;
return h(routesMap[currentPath]); // 根据路由表传入当前路由路径,获取对应的组件,并渲染
}
});
}
⑦ 添加响应式路由
static install(Vue) { // 在install方法中添加响应式路由,因为install方法会传入Vue
// 将当前路由对象定义为响应式数据
Vue.util.defineReactive(this, "current", this._router.currentRoute);
}
class CurrentRoute {
constructor() {
this.path = null;
}
}
class VueRouter { // VueRouter实际上是一个function,也可以看做是一个对象
constructor(options) {
this.mode = options.mode || '';
this.routes = options.routes || [];
this.routesMap = this.createMap(this.routes);
this.currentRoute = new CurrentRoute();
this.init();
}
init() {
if (this.mode === "hash") { // 如果是hash路由
if (location.hash) { // 如果页面一加载的时候就有hash值
this.currentRoute.path = location.hash.slice(1); // 保存当前路由的路径
} else { // 如果页面一加载的时候没有hash值
location.hash = "/"; // 跳转到首页"/",即在url地址末尾添加"#/"
}
window.addEventListener("hashchange", () => { //监听浏览器地址栏hash值变化
this.currentRoute.path = location.hash.slice(1); // hash改变,同样更新当前路由信息
});
} else { // 如果是history路由
if (location.pathname) { // 如果页面一加载的时候就有pathname值
this.currentRoute.path = location.pathname; // 保存当前路由的路径
} else { // 如果页面一加载的时候没有pathname值
location.pathname = "/"; // 跳转到首页"/",即在域名地址末尾添加"/"
}
window.addEventListener("popstate", () => { // 监听点击浏览器前进或后退按钮事件
this.currentRoute.path = location.pathname; // 如果页面一加载就带有pathname,那么就将路径保存到当前路由中
});
}
}
createMap(routes) {
return routes.reduce((result, current) => {
result[current.path] = current.component;
return result;
}, {});
}
// Vue的use方法会调用插件的install方法,也就是说,如果导出的插件是一个类,那么install就是类的静态方法
// 如果导出的是一个对象,那么install就是该对象的实例方法
static install(Vue) { // install方法执行的时候会传入Vue构造函数
Vue.mixin({ // 调用Vue的mixin方法在每个Vue实例上添加一个beforeCreated钩子
beforeCreate () {
if (this.$options && this.$options.router) { // 如果是根组件,那么其options上就会有router属性
this._router = this.$options.router;
} else { // 非根组件
this._router = this.$parent && this.$parent._router; // 从其父组件上获取router
}
// 将当前路由对象定义为响应式数据
Vue.util.defineReactive(this, "current", this._router.currentRoute);
Object.defineProperty(this, "$router", {
get() { // 返回VueRouter实例对象
return this._router;
}
});
Object.defineProperty(this, "$route", {
get() {
return { // 返回一个包含当前路由信息的对象
path: this._router.currentRoute.path
}
}
});
}
});
Vue.component("router-link", {
props: {
to: {
type: String,
default: "/"
}
},
methods: {
handleClick(e) {
if (this._router.mode === "history") { // 如果是history路由
history.pushState({}, null, this.to); //通过pushState()方法更路径,不会刷新页面
this._router.currentRoute.path = this.to; // 更新路径
e.preventDefault(); // 阻止<a>标签的默认行为,防y页面默认跳刷新s页面
}
}
},
render() {
const mode = this._router.mode; // 当前<router-link>组件上也会注入_router属性从而可以获取到路由的mode
return <a on-click={this.handleClick} href={mode === "hash" ? `#${this.to}` : this.to}>{this.$slots.default}</a>;
}
});
Vue.component("router-view", {
render(h) {
const currentPath = this._router.currentRoute.path;
// const currentPath = this.current.path;
const routesMap = this._router.routesMap;
return h(routesMap[currentPath]);
}
});
}
}
export default VueRouter;
向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等
作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码
jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。
这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等
在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue
在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集
常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。
安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装
BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为
使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!