手机上怎么上传网站吗,免费注册网站域名,深圳网站建设公司 概况,微信公众号开发需要多少钱平时我们编写路由时#xff0c;通常直接下载插件使用#xff0c;在main.js文件中引入直接通过引入vue-router中的Router通过Vue.use使用以后定义一个routeMap数组#xff0c;里边是我们编写路由的地方#xff0c;最后通过实例化一个 Router实例 将routes我们定义的routeMao…平时我们编写路由时通常直接下载插件使用在main.js文件中引入直接通过引入vue-router中的Router通过Vue.use使用以后定义一个routeMap数组里边是我们编写路由的地方最后通过实例化一个 Router实例 将routes我们定义的routeMao路由数组。
但是我们并不知道它是如何实现的因此我们可以通过自己编写插件的形式实现一个vue-router
常用路由步骤
//router/index.js
import Vue from vueimport Router from vue-routerVue.use(Router)export const routeMap [{path: /home,component: () import(../components/Home/Home.vue)},{path: /list,component: () import(../components/List/List.vue)},
]const router new Router({routes: constantRouterMap
})export default router//main.js
import router from ./routernew Vue({router,store,render: h h(App),
}).$mount(#app)我们来实现一下如何实现一个hash模式的路由
由于我们不适用插件形式实现因此我们使用步骤与平常实现有一些差异。
router/index.js是我们的路由文件里面放置我们的路由
plugin/router.js是我们的自定义插件文件里面放置我们自定义插件内容
components是我们组件目录放置我们的路由组件(通常使用view定义路由组件)
main.js是我们的入口文件需要在该文件引入router并且实例化vue的时候需要将引入的router使用
1、首先我们在App.vue文件中通过router-view/以及router-link/定义声明式导航和路由占位
divrouter-link to/home首页/router-linkrouter-link to/list列表/router-linkhrrouter-view/router-view
/div
这里我们会发现使用以后会报错因为我们没有下载插件因此没有这两个组件。
我们需要配置plugin插件
由于没有这两个全局组件因此我们需要配置两个全局组件
install方法是为了将我们的路由挂载在我们的组件实例上通过mixin全局混入将我们的实例上挂载$router属性
然后定义两个全局组件router-link由于它渲染出来相当于html中的a标签使用render方法参数为一个createElement方法接收三个参数(第一个参数创建的元素第二个参数元素具有的属性, 第三个参数元素的内容)
router-view由于是一个路由占位符因此返回的是个组件渲染组件。
通过routesMap是我们存放的路由current是我们的当前的path路由因此可以通过查找路由中key值为我们当前path路径的查找到我们的组件。通过return渲染我们的组件
VueRouter.install function (_Vue) {//1、保存VueVue _Vue//2、将以下代码延迟到vue实例初始化完毕执行Vue.mixin({beforeCreate() {//判断如果有router属性就执行下方代码if (this.$options.router) {Vue.prototype.$router this.$options.router;}}})//创建全局组件router-link和router-view//创建router-link组件Vue.component(router-link, {props: {to: {type: String | Object,required: true}},render(h) {// h 有三个参数第一个参数创建的元素第二个参数元素具有的属性, 第三个参数元素的内容return h(a, { attrs: { href: # this.to } }, this.$slots.default)}})//创建router-view组件Vue.component(router-view, {// 组件要重新渲染必须要让数据发生改变的时候重新去执行render函数render(h) {const router this.$routerconsole.log(router.routesMap, routesMap);let component router.routesMap[router.current];//组件//获取到外部传递的路由表return h(component)}})
}
2、我们定义一个路由类该类会获取到我们的路由信息从而进行路由监听以及组件渲染。
(1)、该类中constructor是我们通过实例化vueRouter传入的数据,我们需要通过将数据保存在vueRouter实例上获取到当前的url path路径。
(2)、通过监听方法hashchange监听我们hash值的变化通过方法进行监听但是一定要注意这里方法的this指向必须是vueRouter实例不可以是window,因此需要通过bind改变this指向
(3)、通过defineReactive来讲我们的path路径变为响应式这样每次路径发生变化可以监测到变化。
(4)、定义routesMap为我们的路由对象遍历我们传入的路由数组将我们每个path路径对应组件为一组一组的键值对。
这样可以实现一套hash路由模式的路由跳转。
全部代码如下
//plugin/router.js
let Vue;class VueRouter {constructor(options) {//保存选项this.options options;// console.log(options, 路由数据);// 定义一个响应式的变量current保存当前的hash值let url location.hash.slice(1,) || /;// defineReactive定义响应式的对象Vue.util.defineReactive(this, current, url)// hashchange事件来监听hash值的变化, 注意this指向问题addEventListener(hashchange, this.changeHash.bind(this))this.routesMap {};//对routes中的对象做一个映射routesMap {/home:component,/list: component}this.options.routes.forEach(route {this.routesMap[route.path] route.component})}//监听hash值变化的函数changeHash() {//通过location.hash来获取到hash值this.current location.hash.slice(1,)console.log(this.routesMap, 555);// console.log(this.current);//当前path路径}
}VueRouter.install function (_Vue) {//1、保存VueVue _Vue//2、将以下代码延迟到vue实例初始化完毕执行Vue.mixin({beforeCreate() {//判断如果有router属性就执行下方代码if (this.$options.router) {Vue.prototype.$router this.$options.router;}}})//创建全局组件router-link和router-view//创建router-link组件Vue.component(router-link, {props: {to: {type: String | Object,required: true}},render(h) {// h 有三个参数第一个参数创建的元素第二个参数元素具有的属性, 第三个参数元素的内容return h(a, { attrs: { href: # this.to } }, this.$slots.default)}})//创建router-view组件Vue.component(router-view, {// 组件要重新渲染必须要让数据发生改变的时候重新去执行render函数render(h) {const router this.$routerconsole.log(router.routesMap, routesMap);let component router.routesMap[router.current];//组件console.log(component, component);//获取到外部传递的路由表return h(component)}})
}export default VueRouter;
接下来实现历史路由模式
我们知道历史路由模式和hash路由模式区别是域名是否存在#因此我们可以通过在路由文件中定义mode属性判断是历史路由模式还是hash路由模式。
先大白话来说一下大概的实现思路(hash和history实现区别)
1、我们通过我们定义的mode判断是hash路由模式还是history路由模式router-link点击跳转的时候如果是hash路由模式我们通过render方法返回我们渲染到浏览器域名的数据hash模式是带#的因此我们定义href属性需要#但是history模式是不带#的因此我们不需要加#。其次因为hash模式自动检测我们的域名因此我们实现历史模式需要手动加一个点击事件并且需要阻止a链接默认跳转的行为(preventDefault取消默认行为)并且通过pushState方法实现跳转这是历史路由模式的方法pushState(obj,title,url),最后设置我们的路由当前path路径为我们跳转的路径。
2、当我们定义好它的router-link全局组件以后这时我们hash路由模式和history路由模式已经可以基本实现hash模式带#history路由模式不带#。但是我们仍要定义一个监听历史路由模式变化的监听事件。这里我们通过mode判断是什么模式从而监听不同的事件历史路由模式监听需要通过监听popState方法来判断是否发生变化它坚挺的是我们浏览器的前进后退的变化。
历史路由模式监听事件为hashchange方法这个事件是用来监听我们hash值的变化通过设置两个方法从而设置我们当前路径为对应的path路径。hash模式会通过slice剪切到#历史路由模式则通过location.pathname获取到当前path路径。
实现如下
let Vue;class VueRouter {constructor(options) {//保存选项this.options options;// console.log(options, 路由数据);// 定义一个响应式的变量current保存当前的hash值let url location.hash.slice(1,) || /;// defineReactive定义响应式的对象Vue.util.defineReactive(this, current, url)//判断当前的路由模式if (this.options.mode hash) {// hashchange事件来监听hash值的变化, 注意this指向问题addEventListener(hashchange, this.changeHash.bind(this))} else if (this.options.mode history) {// history模式监听的事件叫做popstate, 监听的是浏览器左上角的两个小箭头的变化addEventListener(popstate, this.changeHistory.bind(this))}this.routesMap {};//对routes中的对象做一个映射routesMap {/home:component,/list: component}this.options.routes.forEach(route {this.routesMap[route.path] route.component})}//监听hash值变化的函数changeHash() {//通过location.hash来获取到hash值this.current location.hash.slice(1,)console.log(this.routesMap, 555);// console.log(this.current);//当前path路径}// historychangeHistory() {// console.log(location.pathname)this.current location.pathname;}} VueRouter.install function (_Vue) {//1、保存VueVue _Vue//2、将以下代码延迟到vue实例初始化完毕执行Vue.mixin({beforeCreate() {//判断如果有router属性就执行下方代码if (this.$options.router) {Vue.prototype.$router this.$options.router;}}})//创建全局组件router-link和router-view//创建router-link组件Vue.component(router-link, {props: {to: {type: String | Object,required: true}},render(h) {// h 有三个参数第一个参数创建的元素第二个参数元素具有的属性, 第三个参数元素的内容const router this.$router;if (router.options.mode hash) {return h(a, { attrs: { href: # this.to } }, this.$slots.default)} else if (router.options.mode history) {return h(a, {attrs: { href: this.to },on: {click: ev {// 1. 阻止a链接的默认跳转行为ev.preventDefault()// 2. 调用pushState方法来实现跳转 pushState(obj, title, url)history.pushState({}, , this.to)// 3. 设置current的值router.current this.to;}}}, this.$slots.default)}}})//创建router-view组件Vue.component(router-view, {// 组件要重新渲染必须要让数据发生改变的时候重新去执行render函数render(h) {const router this.$routerconsole.log(router.routesMap, routesMap);let component router.routesMap[router.current];//组件console.log(component, component);//获取到外部传递的路由表return h(component)}})
}这一期我们讲解了如何实现一个基本的hash路由模式以及history路由模式,但是我们通常使用情况下路由嵌套通过一级路由下定义children属性来定义二级路由这并没有实现下一期来实现路由嵌套。
