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

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 路由模式运行效果分析

从上面运行效果可以看出不论切换到【关于我们】还是【新闻】，地址栏不会有任何变化，可以说不从下面显示内容来看，都不知道切换到哪个导航了。不过观察生成的 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>

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

此时再运行效果如下图所示：

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

]