优秀的编程知识分享平台

网站首页 > 技术文章 正文

vue视频教程系列第三十四节—mode属性的作用

nanyue 2024-08-11 20:39:37 技术文章 8 ℃

mode属性的作用:

我们在做了这么多vue小案例后,发现地址栏里总是有一个”#”。那我们有没有办法去掉这个可恶的“#”呢?想去掉“#”,需要设置router.js。我们来到router.js里

设置mode: “history”,再来看一下页面,发现“#”消失。嗯,达到目的了。

Mode属性还有另一个值,就是hash。当我们将值改成hash里,可以看到地址栏里的“#”又出现了。

mode属性的属性值:

mode:”history” => 地址栏里的“#”消失;

mode:”hash” => 地址栏里的“#”出现,这也是不设置mode的默认值

完整代码:

export default new Router({
 mode: "history",
 routes: [
 
 {
 path: '/home',
 name: 'home',
 component: Home
	 }
 ]
})

404页面的处理:

当我们上网的时候,如果输入错误的页面的时候,通常会出现一个404错误页,这也提升了网站的用户体验。那么我们在项目开发的时候如何处理404页面呢?

实现在404错误处理页面的步骤:

第一步:创建一个Error.vue这个组件

第二步:在router.js里设置路径等:

(1) 引入404页面:import Error from './views/Error.vue'

(2) 设置:

 {
 path: '*',
 name: 'error',
 component: Error
 }

当我们在地址栏输入错误路径时,就会显示404页面了。虽然是一个小小的举动,但对于访问网站的用户来说,会大大提升网站的体验值的,所以它的价值是很大。

网络上会有很多很漂亮很有创意的404页面,我们可以去参考一下,美化一下我们的404页面,会让访问错误地址的用户的情绪放松下来。

Tags:

最近发表
标签列表