VueRouter Basic tutorial series 🎉

After routing

Use the name attribute to set an alias for the routing configuration item.

const routes = [
    {
        name:'user'.path:'/user/:id'.component: {template:'<div>{{$route.params.id}}</div>'}}]Copy the code

The advantages of named routes are as follows:

  1. Shorter routes to navigate addresses and minimize the chance of spelling errors.
  2. Automatic encoding/decoding of path parameters.
  3. Bypassing path sorting (for example, showing only one).

Bypassing path sorting means that named routes can be mapped based on aliases to make path matching more efficient.

Now we use an imperative and named route to navigate to /user/123.

// Automatic encoding/decoding of path parameters
this.$router.push({name:'user'.params: {id:'123'}});
Copy the code

Named view

Named views can show more routing views at the same level (the same component) rather than being nested. Named views enable multiple route rendering exits within a component, which is useful for specific layout components. The concept of a named view is very similar to a named slot, and the default name of the view is default.

{
    path:'/layout'.components: {default:Main,
        sideBar:SideBar
    }
}
Copy the code

HTML:

<div id="app">
    <router-view name="sideBar"></router-view>
    <router-view></router-view>
</div>
Copy the code

Multiple route render exits also represent multiple components, so routing configuration items use the new Components option.

Navigation to enhance

Now the VueRouter navigation function can not only navigate through the “path”, but also use the “named Route” to navigate the path.