前端路由 vue-router

1、路由的基本使用

第一步：创建路由组件的组件；

第二步：配置路由映射:组件和路径映射关系的routes数组；

第三步：通过createRouter创建路由对象，并且传入routes和history模式；

第四步：使用路由:通过<router-link>和<router-view>；

2、路由的默认路径

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: HomeView },
  { path: '/about', component: AboutView }
]

3、history模式

import { createRouter, createWebHashHistory } from 'vue-router'
​
const router = createRouter({
  routes,
  history: createWebHashHistory()
})

4、router-link

to属性：是一个字符串，或者是一个对象

    <router-link to="/home">Home</router-link> |

replace属性：设置replace属性的话，当点击时，会调用router.replace()，而不是router.push()；

active-class属性：设置激活a元素后应用的class，默认是router-link-active

exact-active-class属性：链接精准激活时，应用于渲染的<a>的class，默认是router-link-exact-active；

5、路由懒加载

const AboutView = () => import('../views/AboutView.vue')
​
const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: () => import('../views/HomeView.vue') },
  { path: '/about', component: AboutView }
]

6、路由的其他属性</