1、路由发展阶段
- 后端路由
- 前后端路由分离阶段
- SPA（single page web application）
- 渲染不同的组件
2、前的路由如何实现URL和内容进行映射的------监听URL的改变
-
URL的hash
- URL的hash即是锚点（#），本质上是改变window.location的href属性；
- 我们可通过直接赋值localtion.hash来改变href，但是界面不刷新。
-
HTML5的history
- history是HTML5新增的，它有6种模式改变URL而不刷新页面；
- replaceState：替换原来的路径；
- pushState：使用新的路径
- popState：路径的回退
- go：向前或向后改变路径
- forward：向前改变路径
- back：向后改变路径
- history是HTML5新增的，它有6种模式改变URL而不刷新页面；
3、三大框架的路由
- Angular------ngRouter
- React------ReactRouter
- Vue------vue-Router
4、vue-router
- 路由用于设定访问路径，将路径和组件映射起来；
- 在vue-router的单页面应用中，页面的路径的改变就是组件的切换；
5、开发环境、测试环境、生产环境
- 开发环境：开发环境是开发者专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。
- 测试环境（User Acceptance Test------UAT）：般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产机上。
- 生产环境：指正式提供对外服务的，一般会关掉错误报告，打开错误日志。
6、通过install安装依赖的时候，使用了-save或-S以及 -save-dev或-D，两者的区别是什么
- -save：安装包信息将加入到dependencies（生产阶段的依赖,也就是项目运行时的依赖，就是程序上线后 仍然需要依赖）
- 安装依赖的时候，若没有添加-save和-save-dev，系统默认为-save。
- -save-dev：安装包信息将加入到devDependencies（开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用。）
7、router的使用
- 安装：npm install vue-router （-S）（router在生产环境都需要使用）
- src下面新建router文件夹，里面新建index.js。
javascript
import {createRouter} from 'vue-router' // 导入函数
// 创建路由即创建映射关系（路径 <-> 组件）
const router = createRouter({
routes: [
{
path: '/home',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
component: () => import('@/views/About.vue')
}
]
})
// 导出路由
export deault router;
// 在main.js中进行导入
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')- 使用不同的路由模式------history、hash
javascript
import { createWebHashHistory, createRouter } from 'vue-router'
const router = createRouter({
history: createWebHashHistory()
})8、vue内置组件router-view
- router-view：router-view 当你的路由path 与访问的地址相符时 ，会将指定的组件 替换该 router-view
- router-link：router-link 实现路由之间的跳转
- 属性
-
to：字符串或一个对象
-
replace：点击会调用router.replace(),而不是router.push()
-
active-class：激活a元素后应用的class，默认router-link-active
-
exact-active-class：链接精准激活时，应用于渲染的a的class，默认router-link-exact-active（精准匹配，会匹配至子路由）
-
9、补充
- 默认路径
arduino
{
path: '/',
redirect: '/home' //重定向到home组件
}10、路由懒加载
- 原因： - 当打包构建应用时，js包会变得很大，影响页面加载；路由懒加载可实现用时加载相应的文件。 - vue-router默认支持动态导入组件，类似于webpack的分包 - component可传入一个组件，也可接收一个函数，该函数返回一个Promise； - import函数可返回一个Promise
- name属性：独一无二的属性
- meta属性： meta: { name: '东方饭店', icon: 'icon-setting' }
11、动态路由
- 在应用程序已经运行的时候添加或删除路由，叫动态路由
- 获取动态路由的值
- template中，直接通过$route.params获取值
- created中，this.$route.params获取
- setup中，使用vue-router库提供的hook useRoute
- 该hook会返回一个Route对象，对象中保存着当前路由相关的值。
javascript
<template>
<div>{{ $route.params.id }}</div>
</template>
export default {
created() {
onsole.log(this.$route.params.id)
},
setup() {
const route = useRoute()
console.log(route)
console.log(route.params.id)
}
}12、动态路由------NotFound
less
{
path: '/:pathMatch(.*)",
component: () => import('@/views/NotFound.vue")
}
// template模板中
<div>
温馨提示：{{ $route.params.pathMatch }}路径不存在~ // 温馨提示：...路径不存在
</div>13、具有嵌套
- 定义：能使第一层路由里面的多个组件进行切换。
- 实现：
javascript
const route = [
{
path: '/home',
component: () => import('@/views/home/home.vue'),
children: [
path: '',
name: '',
redirect: '/homeIndex'
component: () => import('@/views/home/index/index.vue')
]
}
]14、编程式路由的跳转
php
1.写在元素上
router.push() => <button @click="$router.push('/exceptionType')">点击跳转</button>
2、js写法
methods: {
handleClick() {
this.$router.push({
path: '/exceptionType',
query: {
name: 'cha',
age: 90
}
})
}
}-
路由返回
- router.back() 相当于router.go(-1)
-
路由前进
- router.forward 相当于router.go(1)
15、动态添加路由
- router.addRoutes：不知道为啥以下代码添加动态路由不起作用。
php
router.addRoute({
path: '/admin',
meta: {
title: '用户管理'
},
component: () => import('@/views//desktop/admin/index.vue')//路由按需加载
})16、路由导航守卫------对路由跳转之前进行拦截
- 参数
- to：即将进入的路由Route对象
- from：即将离开的路由Route对象
- 返回值
- false：取消当前导航
- 不返回或undefined：进行默认导航
- 返回一个路由地址
- 可以是一个string类型的路径
- 可以是一个对象，对象中包含path/query/params
- 可选的第三个参数：next
- vue2中通过next函数进行跳转
- vue3中通过返回值控制，不推荐使用
javascript
router.beforeEach((to, from, next) => {
})