手写签名设计 姓名（手写vue路由）

一 
    
    
    、简易demo // routes注册 import Vue from "vue"; // import VueRouter from "vue-router"; import VueRouter from "./vueRouter"; // 自定义路由 js import Home from "../views/Home.vue"; Vue.use(VueRouter); const routes = [ { path: "/", name: "Home", component: Home, }, { path: "/about", name: "About", // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ "../views/About.vue"), }, ]; const router = new VueRouter({ mode: "history", routes, }); export default router; // vueRouter var _Vue = null export default class VueRouter { // 一
     


     


     


、 install方法 static install(Vue) { // 1 




 




 




、判断插件是否注册 if (VueRouter.install.installed) return VueRouter.install.installed = true // 2 

   

   

   、将Vue构造函数记录到全局变量 _Vue = Vue // 3
     

     

     

、把创建Vue实例的时候传入的router对象注入到Vue实例上 // _Vue.prototype.$router = this.$options.router; // 混入 _Vue.mixin({ beforeCreate() { if (this.$options.router) { _Vue.prototype.$router = this.$options.router this.$options.router.init() // ? } } }) } // 二  




  




  




、构造函数 constructor(options) { this.options = options this.routeMap = {} this.data = _Vue.observable({ current: / }) } init() { this.createRouteMap() this.initComponents(_Vue) this.initEvent() } // 三 


  


  


  、createRouteMap createRouteMap() { // 遍历所有的路由规则    
    
    
，把路由规则解析成键值对  


     


     


    ，保存在routeMap中 this.options.routes.forEach(route => { this.routeMap[route.path] = route.component }) } // 四
     
     
     
、initComponents initComponents(Vue) { Vue.component(router-link, { props: { to: String }, // template: <a :href="https://www.cnblogs.com/xsk-walter/p/to"><slot></slot></a> render(h) { return h( a, { attrs: { href: this.to }, on: { click: this.clickHandler } }, [this.$slots.default] ) }, methods: { clickHandler(e) { history.pushState({}, , this.to) // 修改地址栏 - 不会发送请求 this.$router.data.current = this.to // 重新加载响应的组件 e.preventDefault() // 阻止发送请求 } } }) const self = this Vue.component(router-view, { render(h) { let component = self.routeMap[self.data.current] return h(component) } }) } // 五   




   




   




、返回按钮 



 



 



 、前进按钮问题 initEvent() { window.addEventListener(popstate, () => { this.data.current = window.location.pathname }) } } 二               、Vue-Router传参方式

一
    




    




    




、普通














、动态路由传参方式

// 路由代码传参 import About from about // routes 配置 { path: /about/:id, // 动态路由 component: About, props: true // ①布尔模式 } { path: /about, // 普通路由 component: About, props: { id: 19 } // ②对象模式 } // 接收方式 props props;[id] 或者 props: { id: { type: Number, default: 12} } // ③函数模式 routes:[ { path: /about, component: About, // props: route => ({id:route.query.id}) // url=/about?id="89" 或者 props: route => ({id: route.params.id}) // url=/about/:id => /about/89 } ]

二                、动态路由：将给定匹配模式的路由映射到同一个组件


 




 




 


，复用一个组件   

   

   

，相对与销毁后重建更高效 
    
    
    。

Keep-alive包括时   

     

     

   ，组件的声明周期钩子函数不会被重复调用
     


     


     


。

要对同一个组件中参数变化做出响应的话



  




  




  

，可以通过watch 侦听$route对象上的任意属性

watch: { $route: { immediate: true, handler(route) { // 处理事件 对路由变化做出响应 } } }

或者使用导航守卫  


  


  


，beforeRouteUpdate    
     
     
  ，也可以取消导航

三
     



     



     



、捕获所有路由或404路由

四














、路由的匹配语法

自定义正则 像可以区分 /list/100 和/list/xsk 等路由

routes: [ { path: /list/:id(\\d+)}, {path: /list/:name} ]

可以重复的参数 匹配多个部分的路由




   




   




   
，可以用 * 号和 +号将参数标记为重复

也可通过使用?号修饰符（0个或1个）将一个参数标记为可选

五 
    
    
    、嵌套路由
     


     


     


、命名路由

六 




 




 




、编程式导航

声明式（）\编程式路由 router.push(...)

Router.push(params):

Params: 字符串路径 

   

   

   、路径对象
     

     

     

、命名的路由并加上参数  




  




  




、带查询参数 


  


  


  、带hash

/users/detail { path: /users/detail } { name: detail, params: {id: 0}} { path: /users/detail, query: {id: 0} }

替换当前位置 router.replace({path: /users}) 或者router.push({path:users, replace: true}); 导航时不会向history添加记录

history.go()横跨历史

七
     
     
     
、命名视图：

八   




   




   




、重定向配置

// 通过routes配置来完成 const routes = [{ path: /home, redirect: /}] // 重定向的目标也可以是一个命名的路由 redirect: { name: Details} // 一个方法动态返回重定向目标 const routes = [ { path: /home/:id, redirect: to => { return {path:Details, query: { q: to.params.searchText}} } } ] // 别名 alias: /home

九 



 



 



 、路由组件传参 props               、$route.query$route.params

布尔模式 routes配置时 props:true设置即可

对象模式 props: { id: 0 } 当props为静态的时候很有用

函数模式 创建一个返回props的函数 



 



 



，允许你将参数转换为其他类型                ，将静态值与基于路由的值相结合等操作

props: route => ({ query: route.query.id }) props: route => ({ params: route.params.id})

对于命名视图的路由




    




    




    ，必须为每个命名视图定义props配置

const routes = [{ path: /home, components: { default: Home, sidebar: Sidebar}, props: { default: true, sidebar: true} }]

十
    




    




    




、不同的历史模式

Hash模式：history: createWebHashHistory() SEO受影响 HTML5模式：history：createWbeHistory() 如果没有适当的服务器配置















，就会404               ，需要在服务器上添加一个简单的回退路由 三














、进阶-路由导航

一                、导航守卫：vue-router提供的主要是通过跳转或取消的方式守卫导航 




 




 




。

方式：全局
     



     



     



、单个路由独享














、组件

全局前置守卫：beforeEnter:

每个守卫都接收两个__参数__：to\from\next(可选) 返回值 ①false:取消当前导航 
    
    
    、②一个路由地址：通过一个路由地址跳转到不同的地址 



     



     



     ，类似于router.push()可配置















，当前的 导航被中断然后进行一个新的导航 

   

   

   。 next可选参数

全局后置守卫：afterEach 不接受next函数也不会改变导航本身

全局解析守卫：beforeResolve

路由独享守卫：在routes中配置

组件内的守卫 可用配置API：beforeRouteEnter
     


     


     


、beforeRouteUpdate 




 




 




、beforeRouteLeave

beforeRouteEnter:唯一可传递next回调守卫；解决不可访问this； next（）里的内容执行时机在组件mounted周期之前； beforeRouteUpdate: 该组件复用时被调用