11.vue-router的使用如何根据地址中的路径选择不同的组件？把选择的组件放到哪个位置？如何无刷新的切换组件？

vue-router 官网：router.vuejs.org/zh/

如何根据地址中的路径选择不同的组件？
把选择的组件放到哪个位置？
如何无刷新的切换组件？

上面的刷新意味着什么？什么情况会刷新?

刷新意味着当前界面一切从0开始，要重新就行网络请求，重新从main.js开始重新运行，当前的界面的所有组件都要开始before create,created,before mount,mounted,这样重新运行一遍。而不刷新就可以只是更新数据就可以了。有时候界面只是更新一部分，那么更新部分的组件又要从来一遍声明周期方法，重新生成对象。对于上面的界面只需要刷新左侧就可以了，右侧不需要刷新。如果直接通过 a标签的 href 去切换就是整体界面切换，就是当前界面的所有组件都不要了重新生成。

路由插件

# 为了保证和课程一致，请安装3.4.9版本
npm i vue-router@3.4.9

路由插件的使用

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

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

const router = new VueRouter({
  // 路由配置
})
new Vue({
  ...,
  router
})

vue.use(插件名称) 代表使用一个vue插件

vue插件的使用有两个步骤：

调用vue.use(插件名称) 2

基本使用

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

<!-- App.vue -->
<div class="container">
  <div>
    <!-- 公共区域 -->
  </div>
  <div>
    <!-- 页面区域 -->
    <!-- vue-router 匹配到的组件会渲染到这里 -->
    <RouterView />
  </div>
</div>

路由模式

路由模式决定了：

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

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

hash：默认值。路由从浏览器地址栏中的 hash 部分获取路径，改变路径也是改变的 hash 部分。该模式兼容性最好。
```
http://localhost:8081/#/blog  -->  /blog
http://localhost:8081/about#/blog  --> /blog
```

获取hash,可以通过location.hash来获取

history：路由从浏览器地址栏的location.pathname中获取路径，改变路径使用的 H5 的history api。该模式可以让地址栏最友好，但是需要浏览器支持history api
```
http://localhost:8081/#/blog  -->  /
http://localhost:8081/about#/blog  --> /about
http://localhost:8081/blog  --> /blog
```

获取路径：location.pathname 设置路径：history.pushState(null,null,"/blog")

abstract：路由从内存中获取路径，改变路径也只是改动内存中的值。这种模式通常应用到非浏览器环境中。
```
内存： /			-->   /
内存： /about	--> /about
内存： /blog	  --> /blog
```

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

激活状态

默认情况下，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>

下面是具体使用

routes.js

import Home from "@/views/Home";
import About from "@/views/About";
import Blog from "@/views/Blog";
import Project from "@/views/Project";
import Message from "@/views/Message";

export default [
  { name: "Home", path: "/", component: Home },
  { name: "About", path: "/about", component: About },
  { name: "Blog", path: "/article", component: Blog },
  { name: "Project", path: "/project", component: Project },
  { name: "Message", path: "/message", component: Message },
];

index.js

import Vue from "vue";
import VueRouter from "vue-router";
import routes from "./routes";
Vue.use(VueRouter); // 使用一个vue插件

const router = new VueRouter({
  // 配置
  routes, // 路由匹配规则
  mode: "history",
});
export default router;