This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Vue-router Official document

The use of the router

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <! Use the router-link component for navigation -->
    <! -- Specify the link by passing in the 'to' attribute.
    <! -- <router-link> is rendered as a '<a>' tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <! -- Route exit -->
  <! Components that match routes will be rendered here -->
  <router-view></router-view>
</div>// Define routes // Each route should map one component. Where "component" can be // a component constructor created with vue.extend (), // or just a component configuration object. // We will discuss the nested methods later. const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar}] // Create a router instance and pass the 'routes' configuration // You can also pass other configuration parameters, but that's easy. Const router = new VueRouter({routes // (abbreviated) equivalent to routes: routes})Copy the code

Dynamic routing

  1. What is dynamic routing? Dynamic routing is a form of routing that can receive parameter data, and part of the routing address changes
  2. How do I receive parameters for dynamic routing?

    $route.params

    The method of getting and passing parameter data using the props attribute

    A. We can set the props property to true, and the rout. params property will be set to the component property, so the component can receive the rout. params via props

    B. If you can set the props property to an object, a component can use props to receive data from the object

    C. You can also set the props property to a function, so you can pass both parameter data and object data to the component.

Programmatic navigation and routing parameters

  // 1. Use the name path to transmit route parameters
  this.$router.push({ name: 'Goods'.params: { goodsID: id } })
 // 2. Use path to transmit route parameters
   this.$router.push({path:'goods'.query: {goodsID:id}})	
    / / receiving this. $route. Query. GoodsID

Copy the code

Hash and History modes

Vue-router has the default hash mode. Ur uses # to locate the route, which is bad for SEO. If you set history, you can use common URL mode. This pattern makes full use of the History. pushState API to complete the URL jump without having to reload the page

Use:

const router = new VueRouter({
  mode: 'history'.routes: [...]. })Copy the code

The difference

  1. Hash mode url with #,history mode without #
  2. If you’re thinking about THE URL specification, you need to use the History pattern, because the history pattern is a normal URL without the # and is suitable for development habits
  3. Share pages made with Vue and React to third-party apps. Some apps are not allowed to have URLS, so use history mode
  4. One of the problems with using History is that a 404 error occurs when you refresh a secondary page, so you need to work with the backend to configure Apache or Nginx url redirects to your home page

Routing guard

You can use router.beforeeach to register a global front guard:

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) = > {
  // ...
})

Copy the code

Each guard method takes three arguments:

  • To: Route: indicates the destination Route object to be entered
  • From: Route: Indicates the Route that the current navigation is leaving
  • Next: Function: Be sure to call this method to resolve the hook. The execution effect depends on the call parameters to the next method.

Guards in components

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave
const Foo = {
  template: `... `,
  beforeRouteEnter (to, from, next) {
    // Called before the rendering component's corresponding route is confirmed
    / / no! Can!!!! Get component instance 'this'
    // Because the component instance was not created before the guard executed
  },
  beforeRouteUpdate (to, from, next) {
    // called when the current route has changed but the component is being reused
    // For example, for a path with dynamic parameters /foo/:id, jump between /foo/1 and /foo/2,
    // Since the same Foo component is rendered, component instances are reused. The hook will be called in that case.
    // Can access component instance 'this'
  },
  beforeRouteLeave (to, from, next) {
    // called when navigating away from the corresponding route of the component
    // Can access component instance 'this'}}Copy the code