vue 插件 vue-router解释 Vue Router 是 Vue.js 官方提供的路由管理器，它通过管理 URL

解释

Vue Router 是 Vue.js 官方提供的路由管理器，它通过管理 URL，实现了将组件切分为可复用的模块，并根据 URL 来匹配不同的组件渲染到页面中的功能。

初识

使用 Vue Router，您可以将您的应用分解为多个视图，并将这些视图映射到不同的 URL 上。例如，您可以将 /home 映射到 Home 组件，将 /about 映射到 About 组件。这样，当用户在浏览器中访问 /home 或 /about 时，Vue Router 就会自动渲染相应的组件，而无需刷新整个页面。

以下是一个简单的示例，如何在 Vue.js 中使用 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter) // 使用Vue.use(插件) 在Vue 中安装插件

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

const router = new VueRouter({
  routes: [
     // 路由表
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

new Vue({
    // 传递路由实例router给Vue实例
  router,
  template: `
    <div>
        // 使用router-link 创建链接
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-view></router-view>
    </div>
  `
}).$mount('#app')

在这个示例中，我们首先导入了 Vue.js 和 Vue Router，并使用 Vue.use(VueRouter) 来安装 Vue Router。然后，我们定义了两个组件 Home 和 About，并将它们分别映射到 / 和 /about 路径上。

接着，我们创建了一个 router 实例，并将路由配置传递给它。在路由配置中，我们使用 path 属性来指定路由路径，并使用 component 属性来指定要渲染的组件。

最后，我们创建了一个 Vue 实例，并将 router 实例传递给它。在 Vue 实例的模板中，我们使用 <router-link> 标签来创建链接，并使用 <router-view> 标签来渲染组件。

需要注意的是，为了使用 Vue Router，您必须将应用挂载到一个 HTML 元素上，例如：

📋 Copy code<div id="app"></div>

路由模式

路由模式决定了：

路由从哪里获取访问路径
路由如何改变访问路径

vue-router提供了三种路由模式：

hash：默认值。路由从浏览器地址栏中的hash部分获取路径，改变路径也是改变的hash部分。该模式兼容性最好。
```
http://localhost:8081/#/blog  -->  /blog
http://localhost:8081/about#/blog  --> /blog
```
history：路由从浏览器地址栏的 location.pathname中获取路径，改变路径使用的H5的 history api。该模式可以让地址栏最友好，但是需要浏览器支持 history api
```
http://localhost:8081/#/blog  -->  /
http://localhost:8081/about#/blog  --> /about
http://localhost:8081/blog  --> /blog
```
abstract：路由从内存中获取路径，改变路径也只是改动内存中的值。这种模式通常应用到非浏览器环境中。
```
内存： /			-->   /
内存： /about	--> /about
内存： /blog	  --> /blog
```

RouterLink

vue-router提供了全局的组件 RouterLink，它的渲染结果是一个 a元素 RouterLink 会自动根据路由模式匹配href

    <RouterLink to="/blog">文章</RouterLink>
    <!-- mode:hash 生成 -->
    <a href="#/blog">文章</a>
    <!-- mode:history 生成 -->
    <!-- 为了避免刷新页面，vue-router实际上为它添加了点击事件，并阻止了默认行为，在事件内部使用hitory api更改路径 -->
    <a href="/blog">文章</a>

激活状态

在 Vue Router 中，可以使用 router-link-active 类名来为当前路由添加一个激活状态，以便在用户访问当前路由时，能够将激活状态应用于相应的链接。

当用户访问一个路由时，Vue Router 会自动为相应的 <router-link> 添加一个 router-link-active 类名。您可以使用该类名来定义激活状态的样式，例如：

默认情况下，vue-router会用 当前路径 匹配 导航路径 ：

如果当前路径是以导航路径开头，则算作匹配，会为导航的a元素添加类名 router-link-active
如果当前路径完全等于导航路径，则算作精确匹配，会为导航的a元素添加类名 router-link-exact-active

例如，当前访问的路径是 /blog，则：

导航路径	类名
/	router-link-active
/blog	router-link-active router-link-exact-active
/about	无
/message	无

可以为组件 RouterLink添加bool属性 exact，将匹配规则改为：必须要精确匹配才能添加匹配类名 router-link-active

例如，当前访问的路径是 /blog，则：

导航路径	exact	类名
/	true	无
/blog	false	router-link-active router-link-exact-active
/about	true	无
/message	true	无

例如，当前访问的路径是 /blog/detail/123，则：

导航路径	exact	类名
/	true	无
/blog	false	router-link-active
/about	true	无
/message	true	无

另外，可以通过 active-class属性更改匹配的类名，通过 exact-active-class更改精确匹配的类名

命名路由

使用命名路由可以解除系统与路径之间的耦合

// 路由配置
const router = new VueRouter({
  routes: [ // 路由规则
    // 当匹配到路径 /foo 时，渲染 Foo 组件
    { name:"foo", path: '/foo', component: Foo },
    // 当匹配到路径 /bar 时，渲染 Bar 组件
  	{ name:"bar", path: '/bar', component: Bar }
  ]
})

<!-- 向to属性传递路由信息对象 RouterLink会根据你传递的信息以及路由配置生成对应的路径 -->
<RouterLink :to="{ name:'foo' }">go to foo</RouterLink>