Vue router 模式 hash 和 history

目录

Vue router 基本使用

Vue-router 传参

hash 模式

Vue-router hash

history 模式

---

Vue router 基本使用

        用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子：

// 1、通过 CDN 导入路由包（也可以使用 npm install vue-router 安装到项目）

 

  
  
  Go to Foo
  Go to Bar

  
  
  

Vue-router 传参

        除了使用  创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。当你点击 ​​​​​​​ 时，内部会调用这个方法，所以点击  相当于调用 router.push(...)。

        由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。我们以router.push 为例来详解 Vue-router 传参。

        通过调用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且以 this.$router 的形式访问当前路由。

        1、query 方式传参和接收参数：

// 声明式传入参数：id=10
Go to Foo
// or 编程式传入参数：id=10
this.$router.push({path:'/foo', query:{id:id}});

// $route.query.参数名 获取参数
const Foo = { template: '
foo id:{{$route.query.id}}
' }

       2、 params 方式传参和接收参数

// 定义路由时指定参数名 id 和 name
const routes = [
  { path: '/foo/:id/:name', name: 'foo', component: Foo },
]

// 传入参数：id=10, name=John
Go to Foo
// or 编程式传入参数：id=10, name=John
this.$router.push({name:'foo', params:{id:10, name:John}});

// $route.query.参数名 获取参数
const Foo = { 
    template: '
foo id:{{$route.params.id}}--foo name:{{$route.params.name}}
' 
}

        注意:params传参，push 里面只能是 name:'xxxx'，不能是 path:'/xxx'，因为 params 只能用 name 来引入路由，如果这里写成了path，接收参数页面会是undefined！！！ 

        query 和 params  方式的区别：query 相当于 get 请求，页面跳转的时候，可以在地址栏看到请求参数，而 params 相当于 post 请求，参数不会再地址栏中显示

        3、props 方式传参和接收参数

        在组件中使用 $route 使之与其路由形成高度耦合，使组件只能在某些特定的 url 上使用，可以使用 props 将组件和路由解耦。

// 定义路由时指定参数名 id 和 name
const routes = [
  { path: '/foo/:id/:name', component: Foo, props:true },    //增加props
]

// 传入参数：id=10, name=John
Go to Foo

// 定义路由组件时加入 props 属性
const Foo = {
    props:["id","name"]
    template: '
foo id:{{id}}--foo name:{{name}}
' 
}

        在浏览器中改变地址栏url，将会触发页面资源的重新加载，这使得我们可以在不同的页面间进行跳转，得以浏览不同的内容。但随着单页应用的增多，越来越多的网站采用ajax来加载资源。因为异步加载的特性，地址栏上的资源路径没有被改变，随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式（点击浏览器前进/后退按钮），在前后的页面状态间进行切换。

为了解决ajax页面状态不能返回的问题，人们想出了一些曲线救国的方法，比如利用浏览器hash的特性，将新的资源路径伪装成锚点，通过onhashchange事件来改变状态，同时又避免了浏览器刷新。但这样始终显得有些hack。

现在HTML5规范为 window.history引入了两个新api，pushState 和 replaceState，我们可以使用它很方便的达到改变url不重载页面的目的。

Vue-Router 提供两种路由跳转模式：哈希模式(hash mode)和历史模式(history mode）。

hash 模式

        # 不会刷新页面，也不会发起新的 HTTP 请求，只是实现客户端页面的定位，# 后面的字符不会被发送到服务器端，# 可以修改浏览器的访问历史记录。       

        hash 模式是通过改变锚点(#)来更新页面 url，并不会触发页面重新加载。我们可以通过window.onhashchange() 监听到hash 的改变，从而处理路由。

    a
    b

    

Vue-router hash

        Vue-router 默认使用 hash 模式，使用 hash 模式时 url 中始终有 # 号。

history 模式

        这种模式充分利用 history.pushState 和 history.replaceState API 来完成 URL 跳转而无须重新加载页面。使用 history 模式时URL中不带 # 号。

// 5、 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes,     //（缩写）相当于 routes: routes
  mode: 'history'    // 设置为 history 模式
})