前端 vue.js 框架 vue-router 路由设置全攻略

前端 vue.js 框架 vue-router 路由设置全攻略

vue 系列中vue-router 路由配置 详细教程~~~~~~~~~~~

在使用 vue-cli 中安装好的项目中需要自行安装 vue-router

```BASH

npm install vue-router

或者

yarn addvue-router

```

vue-cli3 脚手架中已经把集合了vue-router ，在搭建项目的时候可以选择安装 ，不需要在额外的安装。

通过 Vue.use() 手动引入/明确地安装路由功能：

import Router from 'vue-router'

Vue.use(Router)

创建一个路由文件，router.js（其他自己喜欢的名称都ok），引入

vue-router

vue.js 做的是单页面应用，通过 vue-router 路由设置，加载不同的模板，达到页面改变的效果。

那么 vue-router 是怎么工作的呢？

vue.js：

使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，

Vue Router ：

组件 (components) 映射到路由 (routes)， Vue Router 通过路由配置知道在渲染 对应的组件。

① app.vue 文件：设置路由出口，

1. app.vue 就是根组件，

2. 路由出口、路由匹配到的组件将渲染在这里

加载的组件u，会在渲染在 区域中

② home.vue 主页

③ login.vue 登录页面

④ register.vue 注册页面

这里就不把 home ，login，register 写出来了，

这里我们的目标是把home ，login，register 做成各为一页的设计，它们同为一级路由

⑤router.js 文件：路由配置

将组件，与 路径匹配，如下图配置，

打开浏览器输入http://127.0.0.1:3000/（根据自己的项目设计更改端口），

http://127.0.0.1:3000/login 进入登录页面

http://127.0.0.1:3000/home 进入主页

http://127.0.0.1:3000/login 进入注册页面

上面设置的一级路由，也就是每个页面是分开的，没有相互的加载，

假设我们需要点击某个条件之后，切换部分内容，例如在百度中，我们点击不同的内容顶部的内容没有切换，只是下面的内容切换了，

这就需要在一个页面中再加载其他的组件~~~

目标：在主页 home.vue 中加载 A 或者 B

① home.vue 文件

② router.js 路由配置

二级路由在一级路由里面配置，

二级路由写在 children 里面，属于孩子。

mode 的设置：这个 mode 是设置 url 地址中的#号是否需要

history:

URL 就像正常的 url，例如 `http://。。。.com/a/`也好看！而不是`http://jsapng.com/#/lms/`跳转页面的时候还会出现闪烁。

hash:

URL 就像正常的 url，例如 `http://。。。.com/#/a/`也好看！

`跳转页面的时候还会出现闪烁。也不美观

跳转页面的时候可能会发生错误，就要设置一个 404 页面，跳转错误的时候默认会跳转这个页面~~~