【Vue学习总结】19.编程式导航和Hash以及History模式

接上篇《18.通过Vue路由和动态传值实现实现新闻模块》

上一篇我们讲解了通过Vue路由和动态传值实现了一个新闻查看模块，本篇我们来学习编程式导航、Hash模式以及History模式。
本系列博文使用的Vue版本：2.6.11

一、编程式导航

什么是“编程式导航”？其实就是使用在触发跳转链接的时候，通过vue-router提供的JavaScript方法来添加条件，根据不同的条件选择跳转的页面。
之前我们跳转页面的方式都是使用<router-link>标签的方式来进行跳转，例如：

<router-link to="/news">新闻</router-link>

这是一种提前约定好跳转位置的方式，该方式为“声明式”。
很多时候我们需要在点击链接的时候，触发一个方法，来根据不同的情况进行不同页面的跳转，vue-router提供了这种方法，而这种方式触发的路由跳转被称为“编程式”。

vue-router提供的路由跳转方法为“push”方法：

this.$router.push(location);

参数location为需要跳转的路由地址，可以直接是一个路由地址字符串，如：

// 字符串
this.$router.push('home')

也可以是一个对象，如：

this.$router.push({path: '/news?nid=' + id});
this.$router.push({ name: 'news', params: { nid: 123 }});

也可以使用命名路由（下面会讲是啥）：

this.$router.push({ name: 'url_news'});

最后，还可以待查询参数，例如下面这个查询最终的结果是“/money_report/account?number=1224”

this.$router.push({path: '/money_report/account', query: {number: "1224"}});

下面我们编写一个样例来说明一下这个方法。我们在原来的首页添加一个按钮，为这个按钮添加一个方法“getNews()”，然后使用router的push方法为其动态指定跳转位置：

<template>
  <div id="app">
    <h2>{{msg}}</h2>
    <div class="header-css">
      <router-link to="/helloWorld">首页</router-link>
      <router-link to="/news">新闻</router-link>
    </div>
    <button @click="getNews()">跳转至新闻页面</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue'
      }
  },
  methods:{
    getNews(){
      this.$router.push({path:'/news'});
    }
  }
}
</script>

<style>
    .header-css{
      height: 4.4rem;
      background: black;
      color: white;
      line-height: 4.4rem;
      text-align: center;
    }
    .header-css a{
      color: white;
      padding: 0 2rem;
    }
</style>

点击该按钮，发现成功跳转至新闻页面：

还有一种上面提到的“命名路由”方式，其实就是给我们的路由起个名字。例如我们在定义路由的时候，给news起个名字叫“url_news”:

//2、定义路由
const routes = [
  {path:'/helloWorld',component: HelloWorld},
  {path:'/news',component: News,name:'url_news'}, 
  {path:'/content/:cid',component: Content},
  {path:'/',component: HelloWorld}
]

此时我们把上面的push内容修改为：

this.$router.push({name:'url_news'});

此时发现也可以跳转成功。

二、Hash模式和History模式

vue-router为了实现SPA（单页面应用），即改变视图的同时不会向后端发出请求的效果，使用了浏览器支持的hash和History方式作为其路由切换模式（mode），一个是在地址栏上默认拼接“#”，一个是使用history api来在浏览器内核修改当前path。

1、Hash模式

默认我们在通过router跳转路由时，在浏览器地址栏上是可以看到跳转的地址中会有一个“#”：

当在URL后面跟“#”后，在“#”后面的字符无论如何改变，都不会影响URL（#后面的字符会被浏览器忽略），也不会触发页面的刷新和后台数据的请求。所以vue-router就可以将path以参数的形式拼接在“#”后，根据这个参数改变单页面中的动态部分。

2、History模式

在JavaScript中用过history对象的童鞋都知道，可以用它来让网页前进或者后退，例如：

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

而history模式就是利用了HTML5 History Interface中新增的pushState()和replaceState() 方法（需要特定浏览器支持）。这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go 方法的基础之上，它们提供了对历史记录（包括URL）进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

history模式有一个缺点，就是在用户手动输入URL后回车，或者刷新（重启）浏览器的时候，会真正的通过URL向后端发起HTTP请求，此时如果后退没有匹配相应的响应页面，就会抛出404页面，所以我们为URL匹配不到任何静态资源的情况，可以配置一个默认页面（例如在Apache中设置一个默认index.html页面）。

3、指定模式的方法

vue-router在实例化的时候，会指定一个“mode”跳转模式的参数，默认为Hash模式，我们也可以重新声明默认的mode模式为其他模式，例如指定模式为history模式：

//3、实例化Router
const router = new Router({
  mode:'history',//将默认的Hash模式改为history模式
  routes
});

4、测试效果

我们使用上面的代码，将路由切换模式改为history模式，然后测试刚刚的新闻页面跳转：

发现浏览器地址不再有“#”，而地址也发生了改变，这里修改了history的URL为同源的其他URL，所以没有触发新的HTTP请求，但页面内容已经改变。

以上就是编程式导航和Hash模式和History模式的全部内容，下一篇我们来学习路由的嵌套。

参考：
https://www.jianshu.com/p/bfffb4b8c9fa
https://www.jb51.net/article/144341.htm
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》

转载请注明出处：https://blog.csdn.net/acmman/article/details/110772295