组成部分:https://router.vuejs.org/zh/api/#routes
1、地址 -- path;
2、渲染内容(加载内容)-- component;
const 定义的对象:User、UserHome、UserProfile、UserPosts
3、嵌套路由 -- children;
声明式 | 编程式 |
---|---|
<router-link :to="..."> | router.push(...) |
例如:
Html内容:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<p>
<router-link to="/user/foo/ss">/user/foo/ss</router-link>
</p>
<p>
<router-link to="/user/foo/profile22/profile">/user/foo/profile</router-link>
</p>
<p>
<router-link to="/user/foo/posts11/posts">/user/foo/posts</router-link>
</p>
<router-view></router-view>
</div>
JS内容:
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }} {{ $route.params.id1 }}</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: '/', component: UserHome },
{ path: '/user/foo', component: UserHome },
{ path: '/user/:id/:id1', 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')