Vue Router ---vue中的重点！！！

一、什么是Vue Router？

Vue Router 是Vue.js 官方提供的路由管理器。它和 Vue.js 核心深度集成，可以方便地在 Vue.js 应用中使用路由功能，支持基于 HTML5 History API 的单页应用 (SPA) 以及传统的多页应用程序 (MPA)。
使用 Vue Router 可以实现在单页应用中切换页面而不刷新页面，同时还支持路由参数、路由组件、嵌套路由等高级功能，方便开发者构建复杂的前端应用。

二、安装

使用npm安装

npm install vue-router --save

安装完成后，在src文件夹下创建router文件夹，在里面新建index.js文件

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

 //Vue中使用router插件
Vue.use(VueRouter)

 //路由配置，配置路由路径与组件的对应关系
const routes = [        
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]
 
 //新建路由实例
const router = new VueRouter({ 
  routes
})
 
 //导出路由实例，在main.js中导入使用
export default router  

main.js配置

import router from './router'      //导入路由router

new Vue({
  router,      //在vue实例中使用router
  store,
  render: h => h(App)
}).$mount('#app')

推荐在创建项目时就安装

Vue进阶——Vue Cli

三、实例

1. router-link

router-link 是 Vue Router 提供的一个组件，用于实现路由跳转。通过 router-link 组件，我们可以将某个链接或者按钮转换成一个具有路由功能的链接。

router-link 支持的属性包括：

使用 router-link 组件的好处是可以避免手动编写路由跳转的代码，同时也可以使用路由系统提供的特性，如动态路由、命名路由等。

<template>
  <div>
    <h1>首页</h1>
    <ul>
      <li>
        <router-link to="/">首页</router-link>
      </li>
      <li>
        <router-link to="/about">关于我们</router-link>
      </li>
      <li>
        <router-link to="/contact">联系我们</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

2. router-view

< router-view > 是 Vue Router 中用于渲染匹配路由组件的组件。当一个路由被匹配时，它的组件将会渲染在 < router-view > 中。

< router-view > 可以被嵌套，这意味着多个嵌套的路由匹配到的组件可以同时在同一个父级 < router-view > 中渲染。在父级组件中添加多个 < router-view > 并使用 name 属性进行区分，就可以实现这个功能。

<!-- App.vue -->
<template>
  <div id="app">
    <header>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>

    <router-view></router-view>
  </div>
</template>

在这个例子中，< router-link > 用于生成一个路由链接，当用户点击它时，会触发路由跳转。< router-view > 则是用于渲染匹配路由的组件。

3.router动态路由

在Vue.js中，动态路由指的是根据不同的参数值，为同一组件创建多个路由。这样，就可以在同一组件中根据参数值展示不同的内容。

使用Vue Router可以轻松实现动态路由。
首先，在定义路由时，需要在path中定义参数
例如：

const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: User
    }
  ]
})

这里的/:id就是参数，当用户访问/users/1时，1就是参数id的值。接下来，在组件中可以使用$route.params来获取参数的值
例如：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

这里的$route.params.id就是获取了路由参数id的值，可以在组件中根据不同的参数值展示不同的内容。当然，在实际应用中，也可以使用watch或computed来动态响应路由参数的变化，从而实现更复杂的业务逻辑。

4.router重定向

在 Vue Router 中，重定向 (redirect) 指当用户访问某个路径时，自动将其重定向到另一个路径。可以在路由配置文件中使用 redirect 字段来实现重定向。

下面是一个简单的例子，在用户访问根路径 / 时，重定向到 /home 路径：

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  }
]

在这个例子中，redirect 字段指定了重定向的目标路径。当用户访问根路径时，会自动跳转到 /home 路径，并显示 Home 组件。

5.路由守卫

路由守卫是指在导航到某个路由前或路由离开前执行的一些钩子函数。在Vue Router中，可以使用全局的路由守卫和局部的路由守卫。

-全局的路由守卫包括beforeEach、beforeResolve和afterEach，它们可以在整个应用程序中使用，用于处理一些共同的逻辑。

beforeEach是在每次路由导航前执行，可以用于控制路由跳转或权限验证；
beforeResolve是在导航被确认之前异步路由组件解析完毕执行的，用于确保异步组件加载完成；
afterEach是在每次路由导航后执行，可以用于处理一些全局的状态变化或页面统计。
局部的路由守卫包括beforeEnter、组件内的beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave，它们可以在某个具体的路由中使用，用于处理该路由独有的逻辑。

beforeEnter是在路由配置中定义的，用于控制路由跳转或权限验证；

beforeRouteEnter是在组件被激活之前执行，用于确保能够访问组件内的数据或组件实例；

beforeRouteUpdate是在当前路由更新时执行，用于处理路由参数变化；

beforeRouteLeave是在当前路由离开时执行，用于控制路由离开或提示用户保存数据。

路由守卫可以对路由进行全局或局部的控制和处理，实现更加灵活的路由管理。

// 注册一个全局前置守卫
router.beforeEach((to, from, next) => { 
  if (to.path === "/back" || to.path === "/back/*") {    //判断当前路由是否需要进行权限控制
    if (localStorage.userRole === "管理员") {    //权限控制的具体规则
      next()
    } else {
      alert("权限不足")
      next("/")
    }
  }
  else next();
})

这是一个简单的前置权限验证路由守卫

6.路由懒加载

路由懒加载是一种优化 Web 应用程序性能的技术，它可以将页面或组件按需加载，而不是在页面加载时一次性加载所有的代码和资源。这样可以减少应用程序的加载时间，提高用户体验。

在 Vue.js 中，可以使用路由懒加载来优化应用程序。通过使用 webpack 的 code splitting 技术，将路由组件代码拆分为小块并按需加载。

使用路由懒加载可以通过 import 异步加载组件，例如：

const Foo = () => import('./Foo.vue')

这将把 Foo 组件拆分到一个单独的异步块中，并在需要时按需加载。

在路由配置中，可以通过 component 属性来指定一个组件。如果将 component 属性的值设置为一个函数，该函数将在需要时被调用，并返回一个 Promise 对象，该对象解析为一个组件对象。这可以通过以下方式实现路由懒加载：

const routes = [
  {
    path: '/foo',
    component: () => import('./Foo.vue')
  },
  // ...
]

7.路由mode

在Vue.js中，路由有两种模式：hash mode和history mode。

history mode可以去除路径中的#

默认情况下，Vue.js使用hash mode作为路由模式。hash mode是基于URL中的hash部分实现的，
例如：

http://www.example.com/#/about。

在hash mode中，URL的改变不会导致浏览器向服务器发送请求，因此，当使用hash mode时，我们可以直接在浏览器中使用前进和后退按钮，切换路由状态，而不会刷新页面。

相反，在history mode中，Vue.js使用HTML5的history API，而不是hash部分来管理路由状态。这意味着，路由的改变会导致浏览器向服务器发送请求，因此，在使用history mode时，需要确保服务器上存在相应的路由配置，以避免404错误。

在Vue.js中，可以通过在路由器配置中将mode属性设置为’history’来启用history mode。

例如：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

在history mode中，我们还需要配置服务器以支持所有的路由请求，即当服务器收到路由请求时，需要始终返回同一HTML文件，以便Vue.js应用程序可以接管路由状态。

需要注意的是，启用history mode后，需要确保应用程序在所有支持HTML5的浏览器中正常运行，因为在不支持HTML5的浏览器中，URL的改变仍然会导致页面刷新。

四、拓展

router-view默认页面设置

通过redirect设置默认显示页面

path: '/',
    name: 'home',
    component: HomeView,
    redirect:'/LifeCycle/1',
    children: [
      {
        path: '/LifeCycle/1',
        component: () => import('../components/Home/LifeCycle/LifeCycle1.vue')
      },
      {
        path: '/LifeCycle/2',
        component: () => import('../components/Home/LifeCycle/LifeCycle2.vue')
      },
      ]