Vue navigation and routing usage

1. Two common navigation

1.1 declarative navigation:

This method is mainly used to define navigation links. However, sometimes we need to use code to dynamically change links, so we need to use the following programmatic navigation.

1.2 programmed navigation

Inside the Vue instance, you can access the routing instance through $router. So you can call this$ router. push.

router.push(...)

Several common uses are as follows.

// character string
router.push('home')

// object
router.push({ path: 'home' })

// Named route
router.push({ name: 'user', params: { userId: '123' }})

// With query parameters, it becomes / register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

Note: if provided path，params Will be ignored in the above example query This is not the case. Instead of the following example, you need to provide routing information name Or handwritten complete with parameters path: 

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// params here does not take effect
router.push({ path: '/user', params: { userId }}) // -> /user

2. Several common routes

2.1 named route

Sometimes it is more convenient to identify a route by a name, especially when linking a route or performing some jumps. You can set the name of a route in the routes configuration when creating the Router instance

The specific methods are as follows:

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',----adopt name Indicates the name of the route
      component: User
    }
  ]
})

To link to a named route, you can router-link of to Property to an object:

The following method will navigate the route to /user/123 route. params:Pass to':'Subsequent parameters
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

2.2 dynamic route matching

We often need to map all routes to which a pattern matches to the same component. Then, we can use "dynamic segment" in the routing path of Vue router to achieve this effect:

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // Dynamic path parameters start with a colon
    { path: '/user/:id', component: User }
  ]
})
Now, like /user/foo and /user/bar Will map to the same route. Namely/user The first path is mapped to User assembly

A path parameter is marked with a colon:. When a route is matched, the parameter value will be set to this$ route. Params, which can be used within each component. Therefore, we can update the User's template and output the current User's ID:

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

pattern	Matching path	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: '123' }

2.3 nested route matching

To render components in nested exits, you need to use the children configuration in the parameters of vueroter:

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          // When / user/:id/profile matches successfully,
          // The UserProfile will be rendered in the User's < router View >
          path: 'profile',
          component: UserProfile
        },
        {
          // When / user/:id/posts match successfully
          // UserPosts will be rendered in the User's < router View >
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

3. Named view

Sometimes you want to display multiple views at the same time (at the same level) rather than nested display, so naming views comes in handy. You can have multiple individually named views in the interface instead of just one single exit. If the router view has no name set, it defaults to default.

That is, by using name Property
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

4. Nested named views

Reference address: https://router.vuejs.org/zh/guide/essentials/named-views.html#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE

5. Redirection and alias

5.1 several common redirection methods

Redirection is also done through routes configuration. The following example is redirection from / a to / b:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

The target of redirection can also be a named route:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

Even a method that dynamically returns the redirection target:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // Method receives the destination route as a parameter
      // return redirected string path / path object
    }}
  ]
})

5.2 path alias

Redirection means that when a user accesses / A, the URL will be replaced with / B, and then the matching route will be / b. what is the "alias"?

/The alias of a is / b, which means that when the user accesses / b, the URL will remain / b, but the route matching will be / A, just as the user accesses / A.

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

The "alias" feature allows you to freely UI Structure mapping to arbitrary URL，Instead of a nested routing structure limited by configuration.

Hold as / b, but the route matching is / a, just as the user accesses / a**

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

The "alias" feature allows you to freely UI Structure mapping to arbitrary URL，Instead of a nested routing structure limited by configuration.