使用 VueRouter 构建SPA单面应用DEMO

H5页面使用 VueRouter 构建SPA单面应用DEMO

VueRouter 实现原理

一个页面地址由协议/主机名/页面地址/查询字符串/hash组成，如

https://www.host.com/static/index.html?query=123#/user/110

通过浏览器打印以下变量可知道

location.href   "https://www.host.com/static/index.html?query=123#/user/110"
location.search "?query=123"
location.hash   "#/user/110"

通过给 location.href 一个新地址，页面就会刷新跳到指定的地址上，这相当点击一个超链接进入新页面。但是，如果新地址只有hash这部分不同，其它都一样的情况就不同了。地址整体是有变化的，但页面不会刷新跳转。通过脚本可以检测到这种变化，那将这种变化以一定的规则和需要呈现的视图绑定，这就是VueRouter干的事。例如，点击这样一个VueRouter路由链接:

Go to User

浏览器地址栏就会改变hash部分：

#/user/110

DEMO 展示要点

• VueRouter 的基本使用方法

• 命名路由，在路由配置项中使用了 name 属性，如 {path: '/user/:userId', name: 'user', component: User }

• 嵌套路由，通过 children 给路由配置子级路由项目

• 重定向路由配置项 { path: '/a', redirect: '/b' } 或在 redirect 中使用命名路由 { name: 'foo' }，或一个方法动态返回重定向目标的方法

• 路由出口组件即生成视图路由结果的视图，

• 命名视图 ，不设置name属性，默认值为 default

• 多视图路由配置 {path: '/', components: { default: Foo, specialView: User } }

• 路由组件会渲染成a标签，点击 等同于调用 router.push(...)。

• 使用命名路由 User

• 编程式的导航

  router.go(n) 类似 window.history.go(n)。
  router.push(location, onComplete?, onAbort?)
  router.replace(location, onComplete?, onAbort?) 相当声明式

  router.push('home') // 字符串
  router.push({ path: 'home' }) // 对象
  router.push({ name: 'user', params: { userId: 123 }}) // 命名的路由
  router.push({ path: 'register', query: { plan: 'private' }}) // 带查询参数，变成 /register?plan=private

关于路由嵌套参考
https://router.vuejs.org/zh/guide/essentials/nested-routes.html

    
    
    

    

      
Hello App!
      

        
        
        Go to Foo
        Go to Bar
        Go to User1 View
        Go to User2 View
        Go Back
        Watching {{stamp}}