html点击图片跳转网页_vue跳转静态HTML,Vue-router，在静态切换的世界中翱翔

什么

首先，Vue 适合 SPA（单页应用）开发，可以达到 html5 中 pjax（部分刷新、无刷新切换路由）的效果，同时也是 Web 应用的路由管理系统。

快速入门

安装 Vue-

npm vue- --save-dev

如果配置了 vue-cli，则不需要安装 Vue-cli，可以选择一起安装 Vue-cli。

vue配置

安装程序会将文件夹和 index.js 文件安装在源目录中

默认配置：

尝试创建一个新的 vue 模板并将其写入 index.js

你可以根据上面的格式编写一个路由数组来添加路由，你还需要在头的 '@//Hi' 中引入 Hi

然后看 src 源码目录下的 App.vue，这里是全局页面

我们打开本地浏览，试着在 host 后添加 Hi，发现你可以跳转到刚刚配置的 Hi.vue 页面，但只有部分，上面默认的 Vue 图片仍然存在，这真是太妙了，在刚刚打开的 App.vue 中，你可以看到这句话是 Vue 作为引导，把其他路由页面加入到这个页面组件里。假设我们需要做一个 SaaS，在这个页面上写一个导航栏，剩下的内容都依赖于引入一个开关

- 说到导航栏，Vue 实际上给了我们一个新的选项卡（或者一个新的组件）来制作导航栏

我们在 App.vue 全局页面编写它

然后在浏览器中，您会看到已经有两个导航按钮

我们注意到地址栏，点击 Hi，发现我们能够在不刷新页面的情况下切换页面和路由，这就是

那

子路由

在网站的实际建设中，我们会遇到二级栏目的情况，比如我们将鼠标悬停在 about，就会显示 about us 和 us，这两个栏目都是从 属于 about 的，所以就有了子路由配置

假设我们将 转换为

：

Hi1 和 Hi2 是 Hi 子页面，然后我们希望这两个子页面在 H 页面的底部，在这种情况下，我们需要写入前面的 Hi.vue

页

创建 Hi1.vue 和 Hi2.vue，修改 msg 以区别，并将路由配置写入 index.js

这允许 Hi1 和 Hi2 继承 Hi

参数传递

在 OA 和 SaaS 开发中，我们经常会遇到需要在路由中传递参数的情况，而 Home |使用时无法传递参数，因此我们在配置路由时可以使用上index.js没有使用过的名称

假设我们需要在跳转时接收它

首先在 App.vue 全局页面上编写一个伪装成面包屑的标签

{{ $route.name }}

保存它，然后您将看到我们在页面上定义的内容

然后尝试将 name 参数添加到带有 child 的

您还可以在浏览器中查看效果。

但是，这种方法并不常用，而且在实际开发中，我们的参数是动态的，所以我们需要对 Hi1 页面进行改造

改造成

这里的名字应该和index.js路由配置中的名字一样，取数组对象，然后写入 Hi1 模板

这将允许您接收参数。我们可以通过动态传递参数来更改 sum id 的值

单页、多路由操作

什么是单页多路由操作，假设我们在一个页面中有几个区域，需要介绍几个模块，我们需要在这个页面上

然后我们创建一个新的 .vue 和 .vue 来写出相应的区别，并在 index.js 中编写路由配置

这是默认配置，左右对应你刚才说的，刷新就能看到效果了

。

通过 URL 传递参数

这

上面提到的传递参数的方法都不会体现在URL中，有时候我们喜欢用URL来标识文章或者一些操作，那么我们就需要用URL来传递参数

创建 .vue 模板

index.js from '@//

添加路由

这里的格式是 path + 冒号 + 属性

然后在 App.vue 导航栏中添加一个

后面跟着 url 参数，点击它可以看到该参数已经包含在路由中。接收它的方式有很多种，vue 的方法是

：

也可以在配置路由时做一些验证，比如必须是一个数字

只需在括号中写下 即可

重 定向

重定向是指两个不同的路由打开同一个页面，类似于返回 Home。

添加路由规则配置

在 App.vue 中添加导航以返回到 Home

重定向参数

与上述路由参数类似，添加路由配置

添加导航：

您可以传递参数并跳转到它。主要是如果重定向路径中传入了参数，跳转时没有参数，则跳转后页面中不会显示任何内容

alias 别名

alias alias 方法也可以实现类似的重定向，不同的是跳转上面之后的 URL 中的地址是重定向的地址，不会有什么区别，而 alias alias 是新的 URL 地址，但页面是一样的

此时导航 Hi1 和重定向页面的内容是一样的，但地址是：8080/#/Hi1 和 8080/#/

路由过渡动画

在切换路线时，我们需要添加一些过渡动画来提升用户体验，因为用户体验没有耳目一新的感觉在

-view 标签周围包裹一个图层，页面将在其中切换内容

Name 代表淡入淡出，Mode 是进入/退出序列

然后添加 CSS

这为您提供了更基本的切换效果

路由模式

这里的 mode 代表了路由模式，添加 mode：'' 之后，我们在路由中会有一个 # 数字，现在这个数字会消失，而且 mode 还有一个模式模式：'hash' 这个模式会带来 # 个数字，选择你个人喜好就行了。

404 处理

如果不配置 VUE，当 404 出现时，用户会感到困惑，他们不会知道网页出了什么问题，所以不会显示

添加配置

* 是显示所有不存在的路由的 Error 页面

引入 '@//Error' 的错误

然后你可以自由配置 404 模板

路由中的 Hook 函数

这

hook 函数可以监听两种状态，一种是传入 route 之前，另一种是离开 route 之前，配置 hook 函数可以写在 index 中，也可以写在 中

index.js 中的 Hook 函数

next（true） 是相当于 的角色，如果改成 false，不会跳转，不写则不造成 no jump

模板中的 Hook 函数

编程导航

假设你需要一个后退和前进按钮（如左上角的按钮）。

HTML格式

应该注意的是，没有历史记录 $.go 就无法工作

- 编程跳转

方法类似于 $.go，你可以推送任何页面

本文的作者

：

创作除注明转载/出处外，均为本站原创，转载前请务必签字