wordpress网站模板怎么用,mukioplayerwp wordpress,久治县wap网站建设公司,有网络打不开网页怎么回事vue-router作为vue全家桶之一的重要插件#xff0c;有必要去深究一下#xff0c;今天我们就从0到1手写一个简化版本。
开始之前#xff0c;我们使用路由插件时是先进行下载路由
npm i vue-router
#xff0c;然后在main.js中使用app.use导入router插件。想要手写vue-rou…vue-router作为vue全家桶之一的重要插件有必要去深究一下今天我们就从0到1手写一个简化版本。
开始之前我们使用路由插件时是先进行下载路由
npm i vue-router
然后在main.js中使用app.use导入router插件。想要手写vue-router必须先搞懂app.use()干了一件什么事情。我们去官方文档下面看看。
app.use()
安装一个插件。 类型 ts interface App {use(plugin: Plugin, ...options: any[]): this
} 详细信息 第一个参数应是插件本身可选的第二个参数是要传递给插件的选项。 插件可以是一个带 install() 方法的对象亦或直接是一个将被用作 install() 方法的函数。插件选项 (app.use() 的第二个参数) 将会传递给插件的 install() 方法。 若 app.use() 对同一个插件多次调用该插件只会被安装一次。 两个组件router-view 和router-link
templatea :href# props.toslot/slot/a
/templatescript setup
const props defineProps({to: {type: String,required: true,},
});
/scriptstyle langcss scoped
/style!--* LastEditTime: 2024-08-14 10:45:56* Description: file content
--
templatecomponent :iscomponent/component
/templatescript setup
import { useRouter } from ./index.js;
import { computed } from vue;
const router useRouter();
const mapRouter new Map();
const reflectMapRouter (router) {router.routes.forEach((route) {// 更具路径进行组件查询保证O(1)时间mapRouter.set(route.path, route.component);});
};
//方法执行进行组件注册
reflectMapRouter(router);
//设置为计算属性响应式更新
const component computed(() {const nowRoute mapRouter.get(router.current.value);//这里注意需要进行校验因为用户可能输入错误网址return nowRoute ? nowRoute : null;
});
/script
style langcss scoped
/style/** LastEditTime: 2024-08-14 10:47:43* Description: file content*/
import { ref } from vue;
// 对所有页面暴露
const ROUTER_KEY __router__;export const useRouter () {//获取暴露的Router对象return inject(ROUTER_KEY);
}
class Router {constructor(options) {//history对象就是createHashWebHistroy返回的history对象this.history options.history;// 路由对象数组path,component,name等配置this.routes options.routes;//获取当前路由地址this.current ref(this.history.url);// 这里的方法是监听hashchange事件来更新current切换路由//可以先不看这一段等会会讲this.history.bindEvent(() {this.current.value window.location.hash.slice(1);})}//插件的install方法install(app) {// 全局声明 有一个router 全局使用的对象app.provide(ROUTER_KEY, this);//注册全局组件app.component(router-link, RouterLink);app.component(router-view, RouterView);}
}
export const createRouter (options) {return new Router(options);
}
export const createWebHashHistory () {function bindEvent(fn) {window.addEventListener(hashchange, fn);}// history 对象return {url: window.location.hash.slice(1) || /,bindEvent}
}
