vue-router

vue-router

使用步骤

1、创建vue项目时，选择使用router路由，脚手架就自动生成了配置路由的js文件，并在入口文件main.js中使用了路由

2、配置路由项：将页面组件import进路由的js文件中，开始配置url所对应跳转的页面

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3、router-link与router-view，
router-link 设置要跳转的路由链接，与前面设置好的路由项相对应
router-view 路由匹配到的内容显示的位置

APP.vue 根组件
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

hash和history模式区别

hash

使用hash模式，URL会有#符号，例如：http://abc.com/#/arbitrarily，此时通过location.hash()方法会取得arbitrarily，hash 虽然出现在 URL ，但不会被包括在 HTTP 请求中，对后端完全没有影响

history

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求，不过当刷新网页时，浏览器会真真实实像服务器发起请求，如果后端没有进行准备，那就会返回404。

keep-alive

如果需要将某个组件进行缓存，可以使用keep-alive标签，将router-view标签进行包裹
keep-alive有两个属性

• include：只有名称匹配的组件会被缓存。
• exclude：任何名称匹配的组件都不会被缓存。

不设置属性则全部组件都会被缓存，缓存了的组件就没有了组件销毁钩子，取而代之的是activated、deactivated组件被激活、组件被移除钩子