用Vue.js+vue-router创建单页应用是比较简单的。使用Vue.js时，我们就已经把组件组合成一个应用了，当你要把vue-router加进来，只要配置组件和路由映射，然后告诉vue-router在哪里渲染它们。举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<h1>Hello Vue-router!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script>
<script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script>
<script>
const Foo = { template: ‘<div>foo</div>‘ }
const Bar = { template: ‘<div>bar</div>‘ }
const routes = [
{ path: ‘/foo‘, component: Foo },
{ path: ‘/bar‘, component: Bar }
]
const router = new VueRouter({
routes // short for routes: routes
})
const app = new Vue({
router
}).$mount(‘#app‘);
</script>
</html>
结果：
动态路由匹配
可以在 vue-router 的路由路径中使用“动态路径参数”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<h1>Hello Vue-router!</h1>
<p>
<router-link to="/foo/first">Go to First</router-link>
<router-link to="/foo/second">Go to Second</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script>
<script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script>
<script>
const Foo = { template: ‘<div>foo {{ $route.params.id }}</div>‘ }
const routes = [
{ path: ‘/foo/:id‘, component: Foo },
]
const router = new VueRouter({
routes // short for routes: routes
})
const app = new Vue({
router
}).$mount(‘#app‘);
</script>
</html>
结果：
嵌套路由
URL中各段动态路径可以按某种结构对应嵌套各层组件。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<p>
<router-link to="/user/foo">/user</router-link>
<router-link to="/user/foo/profile">/user/profile</router-link>
<router-link to="/user/foo/posts">/user/posts</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script>
<script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script>
<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: [
{ path: ‘‘, component: UserHome },
{ path: ‘profile‘, component: UserProfile },
{ path: ‘posts‘, component: UserPosts }
]
}
]
});
const app = new Vue({ router }).$mount(‘#app‘);
</script>
</html>
结果：
时间： 2024-10-07 10:17:20