1. Reasons for existence
It is more simple to express the relationship between multiple nested components. A rendered component can also contain < router View >
const User={
template:`
<div class="user">
<h2>user {{ $route.params.id }}</h2>
<router-view></router-view>//Nested exit
</div>
`
}To render components in nested exits, you must use the children configuration in the parameters of VueRouter, which is consistent with routes. Therefore, multiple routes can be nested.
const router=new VueRouter({
routes:[
{ path:'/user/:id',component:User,
children:[
{ path:'profile',component:UserProfile },
{ path:'posts',component:UserPosts }
]
}
]
})If there is no empty sub route provided in the sub component, the route exit will not render anything when the path of the sub route does not exist. Based on the above configuration, when accessing / user/foo, the route exit does not render anything.
const router=new VueRouter({
routes:[
{
path:'/user/:id',component:User,
children:[
{
path:'',component:UserHome
},
//...Other sub routes
]
}
]
})Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<p>
<!-- Use router-link Components to navigate. -->
<!-- Pass in `to` Property specifies the link. -->
<!-- <router-link> By default, it will be rendered as a `<a>` Label -->
<router-link to="/user/foo">User</router-link>
<router-link to="/user/foo/profile">UserHome</router-link>
<router-link to="/user/foo/posts">posts</router-link>
</p>
<!-- Routing exit -->
<!-- The components to which the route matches will be rendered here -->
<router-view></router-view>
</div>
<script>
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
{ path: '', component: UserHome },
// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
{ path: 'profile', component: UserProfile },
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
{ path: 'posts', component: UserPosts }
]
}
]
})
const app = new Vue({ router }).$mount('#app')
</script>
</body>
</html> Finally, clicking is equivalent to calling router.push( )