1: Vue-router is used basically

  1. The index.js file in the Router file

  2. Import vue and vue-Router in the index.js router file

  3. Register via vue.use (VueRouter)

  4. Const router = new VueRouter({router})

  5. Router = [{},{},{}]

  1. In the main.js file
  2. Import the route object exported from index.js in the router
  3. The Router object is registered when the Vue instance is created (registered in the Vue instance object because the injection Router and Router and router and Route property methods are created in the Vue instance)

  1. In the app.vue file
  2. Use router-view as a placeholder

Two: Dynamic routes

  1. Const ‘name’ = () => import(‘ path ‘)
  2. For example, (path :’./detail/:id’) obtains the route ID
  3. A: enclosing the route. The params. Id ∣ ∣ enclosing the route. The params. Id | | this. The route. The params. Id ∣ ∣ enclosing the route. The query. Id
  4. Method 2: After enabling props(props: True) during route configuration, the URL parameters are passed to the component, and the component accepts the URL parameters using props

Three: set routine by

  1. The same parts use the same code, and different parts use router-view for placeholders
  2. Child route: Children

Four: programmatic navigation

  1. this.$router
  2. Push records history
  3. Replace does not record history
  4. Go Jumps to the historical location
  5. By reference 1: this. $router. Push ({name: ‘path’ params: {id: 1}})
  6. This.$router. Push ({path:’ path ‘,query:{id:2}})
  7. The difference is whether the browser URL is visible

Five: Difference between Hash mode and History mode

  1. The difference of expression form
  2. Hash mode path with Hash sign,? A. Carries parameters after
  3. Is the History mode different from Hash with #?
  4. The principle difference between
  5. The Hash mode is based on the stroke point and onHashchange event
  6. The History mode is based on the History API in HTML5
  7. History. PushState (), and the history. ReplaceState ()

Six: History mode

  1. The History mode requires server support
  2. Applications in a single page, the server does not exist http:www.texturl.com/login this address…
  3. The server should return single-page application index.html except for static resources
  4. Need to add (mode:’history’) when creating VueRouter
  5. Vue-cli Server has configured the history mode

Seven: Implementation principle of VueRouter

  1. Front knowledge

  2. The plug-in

  3. Mixed with

  4. Vue.observable

  5. slot

  6. Render function

  7. Run time and full Vue

  8. Hash mode (location.url)(# after the address to send changes to change the browser does not send requests to the server, it will log the history to the browser)

  9. The content after # in the URL is the path address

  10. Listen for the hashChange event

  11. Find the corresponding component according to the current routing address and re-render

  12. History mode (the browser does not send requests to the server)

  13. Change the address bar with the history.pushstate () method

  14. Listen for popState events (triggered by clicking browser back or Forward and Go)

  15. Find the corresponding component according to the current routing address and re-render

VueRouter simulation implementation – analysis

  1. Use can pass in functions or objects. If a function is passed in, vue. use will call the function directly, or if an object is passed in, vue. use will call the install method of that object internally

  1. The first box is the name

  2. – The second box is properties

  3. The third box is method _ for static methods

Nine: VueRouter – install

  1. Use CLI scaffolding to create a project and lead routing

  2. Create a vuerouter folder storage module under the SRC directory

  3. Create the index.js file in the vuerouter folder

    Let _Vue = null // Export default class VueRouter {// Define a static install method, pass the Vue constructor static install(Vue){//1. Check whether //installed is an added attribute to the current creation. True representatives have installed the if (VueRouter. Install. Installed) {return} VueRouter. The installed = true / / 2. Log the Vue constructor to the global variable (because vuerouter’s instance method uses the Vue constructor) _Vue = Vue //3. Mixin ({beforeCreate(){if(this.options.router){ _Vue.prototype.router = this.$options.router } } }) } }

VueRouter- constructor

Constructor (options){// initialize 3 values // Record the options passed to this object. Options = options RouterMap = {} // This. RouterMap = {} // This is a responsive object (observable provided in Vue converts it to a responsive object). This.data = _vue.Observable ({// stores the current route, value is default)} this.data = _vue.Observable ({// stores the current route, value is default)}Copy the code

11: VueRouter – createRouterMap

  1. The router is converted from the option passed by the constructor into a key-value stored in the routerMap of the constructor

    CreateRouterMap (){// Traverses all the rules, The routing rules parsed into the form of key-value pairs stored in routerMap object / / routes (this is the array to store the routing address) this. Options. Routes. ForEach (route = > {enclosing routerMap route. The path = route.component }) }

Twelve: VueRouter – the router – the link

  1. Error reported at runtime because the Vue runtime version does not support the template template

  2. This can be done using the full Vue or render function

    Home About

    // Take a Vue constructor as parameter initComponents(Vue){// Create a component with Vue // name, Vue.component(‘router-link’,{props:{to:String}, template:’})}

Init (){this.createrouterMap () this.initComponents(_Vue) this.initEvent()} _Vue. Mixin ({this.createrouterMap () this.initComponents(_Vue) this.initEvent()} _Vue. Prototype.$router = this.$options.router this.$options.router.init() } } })Copy the code

VueRouter- Full version of Vue

  1. Run time edition: Does not support template templates, need to package whether to compile ahead of time

  2. Full version: contains the runtime and compiler, the volume of the runtime version is about 10K, the program runs when the template into render function

  3. Create the vue.config.js file

  4. module.exports = { runtimeCompiler:true }

    module.exports = { runtimeCompiler : true }

VueRouter- Full version of render

InitComponents (Vue){Vue.component('router-link',{// Props :{to: String, }, // The first argument is the selector for the element we want to create (such as the tag selector) // The second argument sets some elements for the tag Return h("a",{attrs sets the attribute attrss:{href:this.to}, //router-view on:{// register the event click: This. ClickGandler}}, // This.$slots.default])}, //router-view to prevent click events methods: {clickGandler(e){// The first argument is data, the second argument is stitle, and the third argument is url history.pushState({}, ",this.to) // Load the corresponding component (let's re-render the view below) this.$router.data.current = this.to e.preventDafault() } } }) }Copy the code

15: VueRouter – the router – the view

InitComponents (Vue){const self = this Vue.component("router-view",{render(h){render(h){// Render current route component const component = Self.routermap [self.data.current] // Use the h function to convert the component to the virtual DOM return h(Component)}})}Copy the code

16: VueRouter – initEvent

  1. Fixed an issue where the browser’s forward and back buttons clicked on the address bar to send changes but the view did not send changes

  2. Call popstate

    InitEvevt (){window.adDeventListener (‘ popState ‘,() => {this.data.current = window.location.pathName})}