1.对路由的理解

【概念】：一条路由就是一组key-value的对应关系；路由器用于管理多组路由；
【作用】：前端中路由是为了实现SPA应用(Single Page Application，单页面应用)。其原理是：点击页面的导航栏中的某一个选项，地址栏中的路由当即改变，通过路由器，找到对应的路由规则，加载相应的组件挂载到页面上，页面不会抖动。

// 传统方式：通过点击a标签的href属性，实现不同页面(不同html文件)的跳转，多页面应用，页面抖动
<a class="list-group-item" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a>

【注】：通过点击导航，视觉效果上“消失” 了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

2.搭建路由环境

Step1：安装vue-router，npm i vue-router@3

【注】：在vue2中要用vue-router@3，vue3中要用vue-router@4。

Step2：创建/src/router/index.js文件，配置路由器；

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({})

Step3：在main.js文件中，导入文件，并在配置项中使用router(对象简写形式)

Step4：在/src/router/index.js文件中配置路由规则

export default new VueRouter({
    routes:[
        // path表示是路由的路径
        // component：表示对应的路由规则要加载的
        {path:'/home',component:组件名称},
        {path:'/home',component:组件名称}
    ]
})

【注】：'@/...'表示是src文件夹

3.浏览器的工作模式：

hash模式（后台管理项目推荐使用）

路径中带有#、兼容性好、后期项目部署上线没有路径引发的问题

history模式（美观，前台项目推荐使用）

路径中没有#(更好看)、兼容性略差（相比于hash）后期项目部署上线需要有路径问题，需有后端工程师做路径处理

【前端中的hash值到底是什么？】：

#连同#之后的所有内容，都称之为hash值

【如何调整路由器的工作模式？】：

在new VueRouter的配置项中添加：mode:'history'，默认是hash。

4.二级路由

Step1：配置路由规则

//在/router/index.js文件中，配置二级路由规则
routes: [
        {
            path: '/home', component: Home, children: [
                // 一定要注意的是！！！
                // 二级路由中的path：不加斜杠！！！
                { path: 'news', component: News },
                { path: 'message', component: Message }
            ]
        },
        { path: '/about', component: About }
    ]

Step2：一级路由对应的组件中，加router-link（设置跳转路由）

// router-link中二级路由的“to”属性，要补全，一级路由二级路由全都要写全
<router-link class="list-group-item" to="/home/news" active-class="active">News</router-link>

Step3：在一级路由中，要加载二级路由组件的地方，加router-view（占位） <router-view></router-view>

5. 高亮效果——active-class属性

Vue中设计了一个，激活时用到的类名active-class="active"

【注】：router-view和router-link都是通过Vue.use(VueRouter)带来的。

6. to的两种写法

1.to的字符串写法 `/home`

2.to的对象写法 `:to=" { path:'/home' } "`

7. 一般组件和路由组件

一般组件：调用时，<一般组件名/>，一般放置在components文件夹中
路由组件：通过制定路由规则时，component属性规定要加载的组件，一般放置在pages/views文件夹中。

8. 样式丢失

【问题溯源】：

脚手架默认找的是public文件夹下的index.html页面，不出现二级路由时，路径正确，样式正常显示

当出现子级路由时，刷新页面会造成第三方样式丢失的问题（bootStarp样式），文件的路径错误：

【解决方案】：

将public/index.html中引入样式时的路径修改一下，将 ./ 改为 /。（最推荐）
将public/index.html中引入样式时的路径修改一下，将 ./ 改为 <%= BASE_URL %>。（推荐）
将路由器的工作模式调整为hash模式（不推荐）

命名路由

可以给每一组路由规则起名字

to属性有两种写法：字符串写法、对象写法，

path和name都可以实现路由跳转，但是当涉及传参时，只能使用name name属性不可重复

`$route` 和 `$router`

$route ：当前这一组路由的所有信息,name,meta,path,query,path,params `this.$ route`

fullPath 和 path：当有路由传参时

$router

VueRouter的实例对象，

【注】：我们通常使用$router，对路由规则进行大规模改动

在url中请求字符串中的所有值都默认是字符串类型，所以不加引号（对应的this.$route.query对象中的每一项都是字符串类型）

【注】：路由嵌套其实是指router-view的嵌套

首先里边是一个表达式，可以使用字符串拼接，也可以使用模板字符串

【注】：对于query参数来说，不能传递对象(刷新会出现问题：[])，传递数组时，记得要处理数据类型

每次点击不同的新闻，Detail组件不会重新挂载，只是更新其中的内容数据

params参数

在路由规则时，发生变化，写的是路由占位符

接收params参数时：this.$route.params. ...

params参数传递时，在route-link

to的字符串写法：参数顺序不能乱，个数不能多（如果多的话，就以为是下一级路由，全部都不会显示了）也不能少，可以在定义规则时，采用可选的写法/home/:id?
to的对象写法，顺序混乱、参数个数可以多，但不能少（前提是占位符是必须的）

【注】：params参数，to的对象写法，不能使用path，只能使用name（底层bug）【注】：params参数，to的对象写法，参数的值：不能空字符串、数组、对象(刷新就完)

路由规则中props传值

在路由规则中添加一个配置项，props

因为有component配置项，所以底层会调用组件，先检查有无props，如果有

路由中的prosp是用来传递数据的，组件中的props是用来接收数据的

props写法一——值为对象

可以把prosp中每一组键值对，传递给对应的路由组件

prosp写法二——值为布尔值

可以把该路由规则接收到的每一个params参数传给对应的路由组件（前提是该路由规则有params配置项）

类比于$store.state.sum这种写法很繁琐，所以使用了mapState的写法在props中，路由规则的配置项中，添加一项props:true，就可以在对应加载组件中的批量收到params

prosp写法三——值为函数

replace属性

历史记录是以压栈的方式

在router-link上写replace

模拟是push

如果是二级

两种形成历史记录的模式——push & replace

要求鼠标滑过时，跳转路由，router-link无法实现(因为router-link需要点击)

不借助于router-link的情况下，实现路由跳转给某一个标签注册事件，然后编写js代码（不借助于router-link） this.$router.push('/home')

编程式导航（很重要）

所有的router-link，底层都转换为了a标签，最后页面上呈现的也是a标签，需要点击之后才能实现路由跳转

router-link不能进行逻辑判断

编程式导航不能重复

解决重复会报红 1、方式一：传入两个回调函数，可以简写为之传入一个回调函数

2、方式二：由于得到的是一个Promise对象，所以指定失败的回调，catch

3、方式三：对原生方法的增强

重定向

如果to属性值是name（是通过name跳转的），其子集重定向全部失效

重定向时，redirect要写全 path可以直接写其父级当path属性，不写父级时（直接为空），浏览器会警告提示

rugu

Vue—路由