Vue Router 实现前端路由控制完善理解

时间:2022-06-16

1、Vue Router创建路由实例默认采用 hash 路由

企业网站设计,品牌网站建设,上一章运行结果我们发现地址栏后面会自动在加一个#/,切换不同显示,即切换路由,后面显示就是#/about,#/news。为什么是这种显示模式呢?因为在创建路由实例时 vue Router 默认采用的是hash 路由配置模式(各种浏览器的兼容性比较好)。当在#/about,#/news 之间切换时,也就是当 URL 改变时,页面不会重新加载。


2、 通过 mode 选项可改为 history 路由

如何改为 history 路由呢?对于网站开发而言,上章创建路由实例时只设置了一个必须的选项 routes,可以通过设置路由配置模式 mode 选项来改变默认路由模式,如果不想要 hash 路由模式,只需要设置 mode 为history 即可。

const router = new VueRouter({

routes,

mode:‘history’ //设置路由配置模式,注意,单引号不能少

});

这种 history 路由配置模式缺点,URL 的兼容性不是很好哦,有些浏览器下可能不能正常显示。


3、history 路由模式运行效果分析

image.png


image.png


从上面运行效果可以看出不论切换到【关于我们】还是【新闻】,地址栏不会有任何变化,可以说不从下面显示内容来看,都不知道切换到哪个导航了。不过观察生成的 html 代码发现在当前导航会增加一个 class 样式。

class=“router-link-exact-active router-link-active”

但是此样式没有效果显示出来,实际上内部只给出了样式名,没有设置具体样式,需要自己手动设置具体样式。


4、为当前【导航】添加样式

实际上不论是 hash 路由还是 history 路由模式,系统都会自动为当前导航添加样式的。比如添加如下样式:当前导航字体为红色大小为 20px 等

<style>

.router-link-active{

font-size:20px;

color:red;

text-decoration: none;

}

</style>

注意:样式名取后面一个名称即可,即上面的黄色代码

此时再运行效果如下图所示:image.png


4.1、改进系统默认生成的样式名

系统默认样式名为.router-link-active,如果觉得太长或不好记忆可以改掉,如何改呢?

在创建路由实例时再加一个 linkActiveClass 选项,设置样式名。

const router = new VueRouter({

routes,

mode:‘history’,

linkActiveClass:‘active’});

此时样式就要改为如下:

<style>

.active{

font-size:20px;

color:red;

text-decoration: none;

}

</style>


5、.配置根路由【路由重定向】

此外还有一个小问题:不论哪种路由配置模式,刚打开页面时既没有显示【关于我们】内容,也没有显示【新闻】内容,因为默认打开是进入根路由,而根路由是不存在的。因此,配置路由时再增加一个路由(找不到路由时就重新定向到 about)。

即在下面增加黄色底纹代码,表示找不到路由时,重新定向到 about。(定义路由格式:path 指定路由的 url,component 指定当单击 path 指定的 url 时显示哪个组件内容。)

const routes = [

{ path: ‘/about’, component: About },

{ path: ‘/news’, component: News },

{path:‘*’,redirect:‘/about’}//*表示找不到路由时,重定向到

about

]


Copyright © 2016 广州思洋文化传播有限公司,保留所有权利。 粤ICP备09033321号

与项目经理交流
扫描二维码
与项目经理交流
ciya68