web开发笔记之vue-router使用

简介

---

今天对看文档,对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: '
foo
' }const Bar = { template: '
bar
' }
// 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:
 
-js:
const User = { template: '
User {{ $route.params.id }}
'}const 
router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ]})

这里的 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套
。例如，在 User组件的模板添加一个 ：

const User = { template: ` 
  

     
User {{ $route.params.id }}
 
      
  
 `}

要在嵌套的出口中渲染组件，需要在 VueRouter的参数中使用 children 配置：

const router = new VueRouter({ 
routes:
 [ { 
 path: '/user/:id', 
 component: User, 
 children: [ { 
// 当 /user/:id/profile 匹配成功，
 // UserProfile 会被渲染在 User 的  中 path: 'profile', component: UserProfile }, {
 // 当 /user/:id/posts 匹配成功
 // UserPosts 会被渲染在 User 的  中 
        path: 'posts', 
        component: UserPosts     } ]
 } ]
 })

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
你会发现，children 配置就是像 routes配置一样的路由配置数组，所以呢，你可以嵌套多层路由。
此时，基于上面的置，当你访问 /user/foo 时，User的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：

const router = new VueRouter({ 
routes: [ 
              { 
                   path: '/user/:id', component: User,   
                   children:  [ 
                     // 当 /user/:id 匹配成功，
                     // UserHome 会被渲染在 User 的  中 
                     { path: '', component: UserHome }, 
                     // ...其他子路由  ]
                                 
                } 
        ]
})

结束

就像是舞台, index.html中的是一个根舞台,所有页面间的跳转都在上面,而组件中的 是小舞台 ,但是它的跳转路径在其相对根路径的children来设置.