CLI — 路由基础
最后更新于：2022-04-02 08:09:59
[TOC]
>[success] # 生成router.js文件中透露的技巧
~~~
1.你已经按照我们'Vue--模块化方式结构'篇章中cli-ui篇章做了同等的结构目
录，先从router.js 做入手点，看一下自动生成的能给我们什么其他篇章中没有
的知识点
~~~
>[danger] ##### 隐藏知识点 -- 路由控制组件懒加载
~~~
1.下面about路由组件中使用了import 进行组件导入，这样导入的是，当路
由控制组件显示的时候，组件才显示
~~~
~~~
import Home from '@/views/Home.vue'
export default [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
}
]
~~~
>[danger] ##### 需要分清$route 和 $router
~~~
1.'$router' 作为'VueRouter'实例对象可以用它提供的方法进行一些路由跳转方面的操作
2.'$route' 可以获取'当前路由规则，路径,参数'
~~~
>[danger] ##### 分清history 和 hash
~~~
1.两种方式均为客户端路由的实现方式：当路径法发生变化，不会向服务器发送请求，使用js监视路径的变化
根据不同的地址渲染不同的内容，如果需要服务器端的内容会发送Ajax请求来获取
1.1.Hash模式url中带#号 #号后边内容为路由地址 url带井号或者问号
1.2.History 模式正常url模式
2.原理区别:
2.1.Hash模式是基于锚点，以及onhashchange事件。通过锚点值作为路由地址，路由变化后
触发onhashchange事件
2.2.History 模式是基于HTML5中的History API 有兼容问题
history.pushState() IE10以后才支持
history.replaceState()
不会向服务器发送请求，仅改变浏览器地址栏中的地址，并且将地址记录到历史记录中
3.虽然History 模式不会向后台发送请求，但是注意一点，用户如果刷新页面或者重新请求该地址
会像后台服务器发起请求，此时没有对应连接对应的页面会产生查找不到页面，如果使用history模式
需要后台配合
4.vue-cli已经配置好了对history模式的支持，因此没有以上的问题，即刷新后向服务器发送请求后并没有返回404
5.总结：
5.1.'Hash 模式'：
5.1.1.URL中#后面的内容作为路径地址，仅改变# 后面的内容则不会向服
务器请求这个地址，但会记录到访问历史中
5.1.2.监听hashchange事件，url改变会触发该事件
5.1.3.根据当前路由地址找到对应组件重新渲染
5.2.History 模式
5.2.1通过history.pushState()方法改变地址栏，仅改变地址栏并将其记录到访问历史中，并不会跳转到指定路径即不会向服务器发送请求
监听 popstate 事件，可以记录改变后的地址，调用pushState和replaceState时不会触发该事件，后退或前进历史页面时才会触发
根据当前路由地址找到对应组件重新渲染
~~~
>[info] ## 根据路由章节我们更应学到
~~~
1.强调：首先views文件夹中的内容和components文件夹中的内容虽然都是
组件的形式，但是views 是将页面划分为组件，components中是页面中单独
某一块做成组件，这个组件可能在views中组件任意一个中使用
~~~
>[danger] ##### 动态路由 -- 再次了解
~~~
1.顾名思义路由是动态生成，可以进行同一个类型url进行匹配，举个例子:
'http://localhost:8080/#/argu/2',
'http://localhost:8080/#/argu/3',
'http://localhost:8080/#/argu/4',
2.这一个系列 我们想做匹配，就像下面案例那样我们把不确定参数生成一个
name变量做接受，在name变量前面加冒号来让他动态起来
~~~
* 在router.js 写的一个路由匹配
~~~
// 下面案例中argu.vue 在views 组件中声明的，你也可以理解为views组件中的组件在能和路由做搭配
export default [
{
path:'/argu/:name',
component:() => import('@/views/argu.vue')
}
]
~~~
>[danger] ##### 嵌套路由 -- 再次了解
~~~
1.顾名思义在路由中在做一个路由，为什么会有这样的需求，首先有时候，
我们在某个页面点击后，会跳转另一个页面，虽然跳转到另一个页面，但
这个页面和上个页面却有着关系，因此需要嵌套路由
2.嵌套路由使用的是'children'这个key在路由中，但是children路由中的地
址，禁止连接前面加'/'
3.下面的案例中从'parent'跳到他的子路由'children',在连接地址的写法是如下:
'http://localhost:8080/#/parent/children'
4.要注意，这里的子路由对应的组件也是写到views 文件中，因为子路由对应的子
组件，也是视图
5.不是所有东西都要加'router-link',要知道他只是一个负责连接跳转的标签，而且
相当于a标签
~~~
* 在router.js
~~~
export default [
{
path:'/parent',
component:() => import('@/views/parent.vue'),
children:[
{
// 不要加斜线
path:'children',
component:() => import('@/views/children.vue'),
}
]
}
]
~~~
* parent.vue
~~~
About
~~~
>[danger] ##### 命名视图 -- 让多个视图组件拼成一个大视图
~~~
1.整个项目中有views 文件夹和components文件夹，虽然两个都是组件，但
是要注意的是，'views' 是视图组件，'components' 是视图组件中可能用到的
公共组件，但是有时候一个视图可能是几个大视图拼接成的。
2.举个例子常见的页面布局，左右结构，我们可以吧左面菜单当做一个视图
去维护，右面内容当做一个菜单去维护，然后两个视图组成一个布局这个时
候就用到了视图命名。
3.注意视图命名是一组视图组件构成的因此这里用的是'components' 加's'
4.下面案例中'default' 是默认的意思会对应，没有name的视图，'email','tel'
是对象名字相同的视图
~~~
* router.js
~~~
export default [
{
path:'/name_view',
components:{
default:()=>import('@/views/children.vue'),
email:()=>import('@/views/email.vue'),
tel:()=>import('@/views/tel.vue'),
}
}
]
~~~
* 在项目目录中App.vue 使用的案例
~~~
';