05-Vue路由

前言
vue路由介绍
- 配置路由信息
- vue实例使用vue路由
- - `router-link`
- `<router-link>` Props
- - to
  - replace
  - append
  - tag
  - active-class
  - exact
  - event
  - exact-active-class
  - aria-current-value
  - `router-view`
- `<router-view>` Props
- - name

前言

我们接着上一篇文章 04-Vue：ref获取页面节点–很简单来讲。

下一篇文章 06-Vue路由守卫

vue路由介绍

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

下面是一个基本的例子：

首先使用npm i vue-router@3.5.2 -S导入npm包

配置路由信息

创建/src/router/index.js

// 1、引入vue，vueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
// 2、引入vue页面文件
import HomeView from '../views/HomeView.vue'// 3、使用路由
Vue.use(VueRouter)// 4、创建路由信息
const routes = [// 5、默认路由{path: '/',  //默认路由路径redirect: '/home',  //redirect 表示重定向到指定path},{path: '/home',name: 'home',component: HomeView // 页面文件},{path: '/about',name: 'about',// 懒加载页面component: () => import('../views/AboutView.vue'),},{path: '/login',name: 'login',// 懒加载页面component: () => import('../views/LoginView.vue'),}
]// 路由实例化
const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})// 6、导出路由实例
export default router

在index.js中我们创建了一个vue路由的实例对象router,最后使用export导出了这个实例。

vue实例使用vue路由

接下来我们需要在main.js中使用它

import Vue from 'vue'
import App from './App.vue'
// 导入vue路由实例
import router from './router'Vue.config.productionTip = falsenew Vue({// 使用vue路由实例router,render: h => h(App)
}).$mount('#app')

这样我们就配置好了vue路由相关内容

`router-link`

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

<router-link> 比起写死的 <a href="..."> 会好一些，理由如下：

无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。

`<router-link>` Props

to

类型: string | Location

required

表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a><!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link><!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link><!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link><!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link><!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link
>

replace

类型: boolean
默认值: false

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
```
<router-link :to="{ path: '/abc'}" replace></router-link>
```

append

类型: boolean
默认值: false

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
```
<router-link :to="{ path: 'relative/path'}" append></router-link>
```

active-class

类型: string
默认值: "router-link-active"

设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

exact

类型: boolean
默认值: false

“是否激活”默认类名的依据是包含匹配。举个例子，如果当前的路径是 /a 开头的，那么 <router-link to="/a"> 也会被设置 CSS 类名。
```
<router-link to="/acabcde"></router-link><router-link to="/ac"></router-link>
```
按照这个规则，每个路由都会激活 <router-link to="/">！想要链接使用“精确匹配模式”，则使用 exact 属性：
```

<router-link to="/" exact></router-link>
```
查看更多关于激活链接类名的例子可运行(opens new window)

event

类型: string | Array<string>
默认值: 'click'

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

exact-active-class

类型: string
默认值: "router-link-exact-active"

配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

aria-current-value

类型: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'
默认值: "page"

当链接根据精确匹配规则激活时配置的 aria-current 的值。这个值应该是 ARIA 规范中允许的 aria-current 的值 (opens new window)。在绝大多数场景下，默认值 page 应该是最合适的。