[ 什么是vue-router ]

传统的路由是针对服务器不同文件，这样路由的变动就会导致新页面加载，导致页面刷新。vue-router 实现了在 vue 组件基础上，不加载页面文件，而是更改部分页面组件的方式来展现不同路由时显示的内容。同时节约了客户端和服务端资源。

[ 安装 ]

  npm i vue-router@4

[ 使用 ]

• vue-router 是通过 hook 的方式获取 router 对象并完成配置，然后以插件的方式挂载到app上面

  // router.js
  import { createRouter, createWebHistory} from 'vue-router'
  import Login from '../components/Login'
  import Register from '../components/Register'
  const routes = [
    {
      path: '/login',
      name: 'Login'
      component: Login
    },
    {
      path: '/register',
      name: 'Register'
      component: Register
    }
  ]
  const router = createRouter({
    history: createWebHistory(),
    routes
  })
  export default router

• 在 main.js 中挂载

  // main.js
  import router from './router'
  app.use(router)

• 在组件中使用路由

  // App.vue
  <router-link to="/login">Login</router-link>
  <router-link to="/register">Register</router-link>
  <hr>
  // router-view 是显示组件的地方，也就是显示 Login 或者 Register 内容的地方
  <router-view></router-view>

• 事件触发跳转

  <template>
    // 方式一 二
    <button @click='toPage('/login')'>Login</button>

    // 方式三
    <button @click='toPage('Login')'>Login</button>
  </template>
  <script>
    import { userouter } from 'vue-router' 
    const router = userouter()

    // 方式一
    function toPage(url) {
      // 通过 push 方法实现跳转
      router.push(url)
    }

    // 方式二
    function toPage(url) {
      // 传入一个对象
      router.push({
        path: url
      })
    }

    // 方式三
    function toPage(name) {
      router.push({
        name
      })
    }
  </script>

[ 路由模式及其不同 ]

• createWebHistory || createWebHashHistory
• 如果在login页面里面采用 WebHistory，那么 '/' 路径代表的就是localhost
• 而如果采用WebHashHistory，那么 '/' 路径代表 localhost/login#/
• 如果是单页面文件，选择 WebHistory 会简洁一点
• 如果是多页面文件, WebHashHistory 更容易区分前端路由和后端路由. 当然 WebHistory 也可以，个人更倾向于 WebHistory

[ 给路由命名 ]

  const routes = [
    {
      path: '/login',
      name: 'Login', // 给路由命名
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    }
  ]

• 对应的跳转方式

  <router-link :to="{name: 'Login'}">Login</router-link>

[ 历史记录的处理 ]

[ 不加入历史记录 ]

• 如果页面跳转不想被历史记录 需要加入 replace 属性给 router-link

  <router-link replace to='/login'>Login</router-link>

• 事件跳转不加入历史记录，将 push 方法更变为 replace 方法即可

  router.replace('/login')

[ 控制页面跳转到历史记录 ]

  router.go(n) // 跳转到历史记录向后 n 个记录的页面
  router.back(n) // 跳转到历史记录向前 n 个记录的页面

[ 如何通过路由传参 ]

• 通过在 push 或者 replace 方法 中传入的对象里面加入 query 或者 params 属性的方式可以传参
• 在组件中，通过 router.query.xxx || router.params.xxx 来获取参数

[ query ]

• 这种方式在地址栏的 url 中会携带参数并显示出来

  router.push({
    path: '/info',
    query: item
  })

  // info
  <div>Price: {{ router.query.price }}</div>

[ params ]

• 这种方式 url 不会携带参数

  router.push({
    name: 'Info',
    params: item
  })

  // info
  <div>Price: {{ router.params.price }}</div>

[ 动态传参 ]

• 在设定路由的时候，可以添加一个动态参数

  const routes = [
    {
      path: '/detial/:id'
      component: Detial
    }
  ]

• 在传参的时候传入包含对应参数的对象即可

  const id = item.id
  router.push({
    path: '/detial'
    query: {
      id
    }
    // OR
    query: item
  })

• params 方式也可以实现动态传参

[ 多级路由嵌套 ]

• 通过 children 属性来实现路由嵌套

  const routes = [
    {
      path: '/user'
      component: User,
      children: [
        {
          path: '/login'
          component: Login
        }
      ]
    }
  ]

[ 命名视图 ]

• 通过命名视图，一个路径可以对应多个视图组件，并且可以通过名称进行控制

  import Login from '../components/Login'
  import Register from '../components/Register'
  const routes = [
    {
      path: '/login'
      // 这里 component 是一个对象
      component: {
        login: Login
      }
    },
    {
      path: '/register'
      // 这里 component 是一个对象
      component: {
        register: Register
      }
    }
  ]

  <template>
    <router-view name='login'></router-view>
    <hr>
    <router-view name='register'></router-view>
  </template>

[ 重定向 和 别名 ]

[ 重定向 rediret ]

  const routes = [
    {
      path: '/'
      rediret : '/login'

      // OR
      rediret: {
        path:'/login'
      }

      // OR
      rediret: to => { // to 是被重定向的路由信息
        return {
          path: '/login'
          query: xxx // 这里可以传参
        }
      }
    },
    {
      path: '/login'
      component: ...
    }
  ]

[ 别名 alias ]

  const routes = [
    {
      path: '/',
      alias: ['/root'] // 这里设置别名后，访问 /root 就相当于访问 /
    }
  ]

[ 导航守卫 ]

• 导航守卫是

[ 前置守卫 ]

[ 后置守卫 ]

[ 路由元信息 ]

[ 过渡动效 ]

[ 动态路由 ]