路由
含义及原理
路由（router）就是对应关系。地址与页面上组件的对应关系。Hash地址与组件之间的对应关系！
锚链接
锚链接不会使页面刷新，但有浏览历史。
（Anchor Link）是指在网页中通过链接跳转到同一页面的不同位置的技术。它可以让用户通过点击链接或者页面内部的锚点，直接跳转到页面的特定位置，而无需重新加载整个页面。
当构建单页应用（Single-Page Application）时，可以使用锚链接作为页面内部导航的一种方式。通过更改 URL 中的锚点部分，可以切换显示不同的内容或执行相应的操作。在这种情况下，锚链接可以被用作页面状态的标识符，并与特定的数据或视图相关联。#部分及其往后的叫做哈希地址。
location.hraf:file:///Users/howlong/Desktop/router-demo1/test/01.%E9%94%9A%E9%93%BE%E6%8E%A5.html#b2
location.hash:#b2//哈希地址
锚链接通常使用 HTML 中的 <a> 标签和 href 属性来定义。要创建一个锚链接，需要在目标位置设置一个唯一的标识符（锚点），然后在链接中使用该标识符作为 href 属性的值。例如：
htmlCopy code
<a href="#section1">跳转到第一节</a>
...
<h2 id="section1">第一节</h2>
<p>这是第一节的内容。</p>
在上面的示例中，点击“跳转到第一节”链接时，页面会平滑滚动到具有 id="section1" 的 <h2> 元素所在的位置，即页面的第一节。
锚链接的优点包括：
-
网页内部导航：锚链接使用户可以快速导航到页面的特定部分，特别适用于较长的页面或包含多个章节的页面。
-
用户体验：通过锚链接，用户可以轻松浏览和定位页面的内容，提供了更好的用户体验和导航。
-
链接分享和书签：锚链接可以直接指向页面的特定位置，方便用户分享链接或者创建书签。
SPA与前端路由
SPA指一个网站只有唯一的一个HTML页面，所有组件的展示和切换都在这唯一的一个页面完成，此时，不同组件之间的切换需要通过前端路由来实现；不同功能之间的切换，要依赖于前端路由来完成！
SPA 是单页面应用的缩写，它是一种 Web 应用程序的架构模式。在传统的多页面应用中，每个页面都会重新加载整个页面内容，而在 SPA 中，整个应用程序只有一个 HTML 页面，通过使用 JavaScript 动态地更新页面的内容，实现了在单个页面内切换不同的视图和功能。
SPA 的核心思想是通过 AJAX（Asynchronous JavaScript and XML）技术，向服务器请求数据并更新页面的一部分，而不是重新加载整个页面。这使得应用程序的加载速度更快，用户体验更加流畅。同时，SPA 可以使用前端框架（如 Vue.js、React、Angular 等）来管理视图和数据的状态，提供更好的开发体验和代码组织结构。
SPA 的优点包括：
-
用户体验：SPA 提供了快速响应和流畅的用户体验，因为页面不会频繁刷新，只更新必要的内容。
-
性能优化：由于只加载一次 HTML 和静态资源，在页面之间切换时不需要重新加载资源，减少了网络请求和带宽消耗。
-
代码维护和开发效率：使用前端框架可以将应用程序拆分成组件，提高代码的可维护性和重用性，同时提供了更好的开发工具和调试支持。
-
与后端 API 的松耦合：SPA 可以通过 API 与后端通信，前后端可以独立开发和部署，提高了团队的协作效率和灵活性。
然而，SPA 也存在一些考虑和挑战：
-
首次加载时间：由于一次性加载所有必要的资源，首次加载可能会较慢，特别是在较大的应用程序中。但可以通过代码分割和异步加载来优化加载时间。
-
SEO（搜索引擎优化）：由于大部分内容是通过 JavaScript 动态生成的，搜索引擎的抓取和索引可能受到限制。但现代的搜索引擎可以处理 JavaScript 渲染并索引单页面应用。
-
内存管理：SPA 在用户与页面交互时会在内存中保留状态和数据，可能导致内存占用较高，特别是对于复杂的应用程序。
总之，SPA 是一种现代化的 Web 应用程序架构模式，它通过在单个页面上动态更新内容，提供了更好的用户体验和开发效率。然而，SPA 也需要考虑一些潜在的问题，并根据具体情况做出权衡和优化。
前端路由的工作方式
-
用户点击了页面上的路由链接
-
导致了URL地址栏 中的 Hash值 发生变化
-
前端路由监听到 Hash 值的变化
-
前端路由 渲染 Hash地址对应的组件 到浏览器中。
路由链接的本质（a链接）
路由链接本质上是 <a> 链接（anchor link）的一种形式。在 web 开发中，为了实现前端路由（Front-end Routing），通常会使用 <a> 链接来导航用户到不同的页面或视图。
在前端路由中，为了实现页面的切换和导航，通常会结合使用 <a> 链接和 JavaScript 代码。通过 JavaScript 监听 <a> 链接的点击事件，可以阻止默认的页面跳转行为，而是根据链接的目标地址（通常是 URL 中的哈希部分）加载相应的页面内容或执行相应的操作。
现代前端框架和库（如 Vue.js、React、Angular）提供了路由功能的抽象和封装，通过特定的语法和 API，可以更方便地定义和管理路由链接。这些框架和库会提供特定的组件或指令，用于创建和处理路由链接，实现页面间的导航和切换。
因此，虽然路由链接在表现形式上和普通的 <a> 链接类似，但它们在实现上具有更多的功能和特性，用于实现前端路由和单页应用的导航和页面切换。
-
页面上的路由链接：
<a href="#/home"></a> -
前端路由的对应关系（对象）：
{path:'#/home',component:Home},//一个对象两个属性，链接与path匹配，找到对应的component。 -
页面上展示的组件：home组件
实现简易的前端路由
<!-- a 链接添加对应 Hash 值 -->
<a href="#/home">Home</a>
<a href="#/movie">Movie</a>
<a href="#/about">About</a>
<!-- 动态渲染组件/使用动态组件 -->
<component :is="compName"></component>
<script>
export default {
name: 'App',
data() {
return {
//在动态组件的位置，要展示的组件的名字，值必须是字符串。
compName: 'Home'
}
},
created() {
//只要当前的App组件一被创建，就立即监听window对象的onhashchange事件。
// 监听 Hash 地址改变，切换组件
window.onhashchange = () => {
console.info('监听到了hash地址的变化'，location.hash)
switch(location.hash) {
case: '#/home':
this.compName = 'Home'
break
case: '#/movie':
this.compName = 'Movie'
break
case: '#/about':
this.compName = 'About'
break
}
}
}
}
</script>
基本用法（vue-router）
vue-router
vue-router是vue.js给出的路由解决方案，它只能结合vue项目进行使用，来管理SPA项目中组件的切换
安装配置
-
安装vue-router包。
-
创建路由模块。
-
导入并挂载路由模块。
-
声明路由链接和占位符。
1. 安装vue-router包。
2. 创建路由模块
路由模块就是router文件夹中的index.js
在src源代码目录下，新建router/index.js路由模块，并初始化如下代码：
-
导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
// src/router/index.js 就是当前项目的路由模块
-
调用vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)
// 把 VueRouter 安装为 Vue 项目的插件
// Vue.use() 函数的作用，就是来安装插件的
-
创建路由的实例对象
const router = new VueRouter()//router即为路由实例
-
向外共享路由的实例对象
export default router // 之后便要将router对象在main.js中进行挂载。
3. 导入并挂载路由模块
-
在main.js中导入路由模块
import router from '@/router'//目的：拿到路由的实例对象
// 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做 index.js 的文件
-
在main.js中进行挂载
new Vue({
render: h => h(App),
// 在 Vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
// router: 路由的实例对象
router // 属性名和属性值一样，router:router的简写。
}).$mount('#app')
4. 声明路由链接和占位符
Router-link：
当安装和配置了 vue-router 后，就可以使用 router-link 来替代普通的 a 链接了。
请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。
Router-view：
router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。
有了hash地址，有了组件，接下来就是对应关系，
'/':在 hash 地址中， / 后面的参数项，叫做“路径参数”,在路由“参数对象”中，需要使用 this.$route.params 来访问路径参数。
'?':在 hash 地址中，? 后面的参数项，叫做“查询参数”,在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数。
在 this.$route 中，path 只是路径部分；fullPath 是完整的地址
/movie/2?name=zs&age=20 是 fullPath 的值
/movie/2 是 path 的值
嵌套路由
通过路由实现组件的嵌套展示：点击父级链接显示模版内容，模版内容中又有子级路由链接，点击子级路由链接显示子级模版内容。
通过children属性声明子路由规则。
在src/router/index.js路由模块中，导入需要的组件，并通过children属性声明子路由规则。
默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
动态路由匹配
假设有多个路由链接，定义多个路由规则，但是这样复用性差
所以：
动态路由指：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。
在vue-router中使用':'定义路由的参数项，示例如下
{ path: '/movie/:mid', component: Movie, props: true }, 这里的mid只是个名字可以随便起。
-
this.$route 是路由的“参数对象”
-
this.$router 是路由的“导航对象”
为路由规则开启props传参
声明式导航&编程式导航
在浏览器中，点击链接实现导航的方式叫做声明式导航；
例如：<a>,<router-link>
在浏览器中，调用API方法实现导航的方式，叫做编程式导航；
例如普通网页中调用<location.href>跳转到新页面的方式，属于编程式导航。
Vue-router中的编程式导航API（常用）：
this.$router 是路由的“导航对象”
-
this.$router.push('hash地址')
-
跳转到指定hash地址，并增加一条历史记录。
-
-
this.$router.replace('hash地址')
-
跳转到指定的hash地址，并替换掉当前的历史记录。
-
-
this.$router.go(数值n)
-
调用此方法，可以在浏览历史中前进和后退。
-
<template><div class="movie-container">
<button @click="$router.back()">back 后退</button>
</div></template>
<script>
export default {
methods: {
goback() {
// go(-1) 表示后退一层
// 如果后退的层数超过上限，则原地不动
this.$router.go(-1)
}
}
}
-
简化用法：在实际一般只会前进或后退一个页面，因此vue-router提供了如下两个便捷方法：
-
$router.back():
<button @click="$router.back()">后退</button> -
$router.forward():
<button @click="$router.forward()">前进</button> -
在行内使用编程式导航跳转的时候，this 必须要省略，否则会报错！
-
-
导航守卫
导航守卫可以控制路由的访问权限。示意如下：
home首页：<router-link to="/main">主页</router-link>
main后台主页:
假设 main主页 必须登录了之后才能被访问，但是 home首页 无法控制访问权限，用户可以直接访问后台主页。
标签：vue,更新,组件,router,链接,路由,页面 From： https://www.cnblogs.com/yxxcl51/p/17505308.html