简介
今天对看文档,对vue-router的使用有了写了解,并且做了个跳转的demo,所以今天见简单介绍一下vue-router的使用.
内容
- SPA
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。[1]
浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。
- 简单的案例
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用
Vue.use(VueRouter)
// 1. 定义（路由）组件。// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }
// 2. 定义路由// 每个路由应该映射一个组件。 其
中"component" 可以是// 通过 Vue.extend() 创建的组件构造器，// 或者，只
是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({ routes
// （缩写）相当于 routes: routes})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({ router}).$mount('#app')
// 现在，应用已经启动了！
这样就实现了一个简单的单页应用demo.
说说我的理解,单页应用可以使webapp更加接近原生应用,使用vue-router和相应的过渡可以做出媲美webapp的界面调转和原生应用的跳转.其实就是用js和css3实现了例如ios中页面跳转的过渡.
- 嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
/user/foo/profile /user/foo/posts
+------------------+ +------------------+
| User | | User |
| +--------------+ | | +--------------+ |
| | Profile | | +------------> | | posts ||
| | | | | | | |
| +--------------+ | | +--------------+ |
+------------------+ +------------------+
**可以认为是页面和页面间的跳转,和一个页面中局部区域的跳转 **
一般我们的应用只有一个router实例,它设置了所用的路径跳转,我们可以根据路径的深度和广度以及其他来设置相应的过渡,(就像ios中的转场一样).给我的感觉就像一个操控整个局势的无形之手一样.
借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。
接着上节创建的 app：
-html:
<div id="app"> <router-view></router-view></div>
-js:
const User = { template: '<div>User {{ $route.params.id }}</div>'}const
router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ]})
这里的 <router-view>是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>
。例如，在 User组件的模板添加一个 <router-view>：
const User = { template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`}
要在嵌套的出口中渲染组件，需要在 VueRouter的参数中使用 children 配置：
const router = new VueRouter({
routes:
[ {
path: '/user/:id',
component: User,
children: [ {
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, {
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts } ]
} ]
})
要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
你会发现，children 配置就是像 routes配置一样的路由配置数组，所以呢，你可以嵌套多层路由。
此时，基于上面的置，当你访问 /user/foo 时，User的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
// ...其他子路由 ]
}
]
})
结束
<router-view>就像是舞台, index.html中的<router-view>是一个根舞台,所有页面间的跳转都在上面,而组件中的<router-view> 是小舞台 ,但是它的跳转路径在其相对根路径的children来设置.
