上一篇我们讲解了通过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