Vuerouter路由

梦里梦外; 2023-03-04 09:17 24阅读 0赞

### 1. 前/后端路由 ###

#### 1. 后端路由 ####

1.  一个url（uniform resource location）对应一个页面
2.  在页面地址跳转时，后台会根据url地址返回新的页面内容（后台在内部使用后台模板+数据渲染生成一个html字符串返回给前端浏览器），然后浏览器去解析这个字符串，构建dom树，css树，合并生成渲染树renderTree，根据内容的不同生成渲染层 和 合成层，然后调用gpu去渲染页面到屏幕上
3.  每次切换路由，后台返回新的页面内容，浏览器等待这个新内容时有**白屏时间**，每个页面之间的有些资源是共用的，重复再次获取带来带宽等各种浪费
4.  后台路由每次返回的页面都是已经完成生成好的，可以被搜索引擎抓取收录，seo优化比较好

#### 2. 前端路由 ####

1.  通过不同的事件（可以是按钮点击事件，也可以是hash、history路由的切换事件），来去渲染不同的视图，这个视图的数据就通过ajax来获取，所以只需要获取对应的资源，不需要完整的获取所有资源；同时也没有等待的白屏时间。
2.  前端路由的页面，只有初始时的空白页面或者一部分内容，后续的页面是根据用户操作才产生的，所以搜索引擎抓不到，不利于seo优化

### 2. vue-router的使用 ###

1.  定义路由地址（使用hash方式那就是hash值）和 组件之间的对应关系。经常称为**路由中心**
2.  定义何时触发路由跳转： router-link组件来控制路由跳转，该组件写在哪就表示在哪生成一个a标签做跳转，跳转的目标地址，由router-link的to属性声明
3.  定义匹配到的路由地址对应的组件的显示位置：router-view组件做占位符，被匹配到的组件替换router-view组件所在的位置
4.  把路由实例挂载到vue的实例，在new Vue时传递router配置，配置项的值就是router的实例

### 3. $route $router routes区分 ###

1.  routes定义所有的路由
2.   r o u t e 表 示 路 由 数 据 ， 含 有 当 前 路 由 的 数 据 ： 如 ‘ route 表示路由数据，含有当前路由的数据：如\` route表示路由数据，含有当前路由的数据：如‘route.params`路由动态参数，`$route.query\`路由查询参数等数据
3.  $router 路由器，能够执行路由功能，比如前进、后退、替换等等。【带er的一般是个拟人化表示，表面这是一个能够执行某种功能的（比如webpack的loader加载器）】

### 4. 编程式导航 ###

1.  声明式： 使用标签声明要跳转的路径和参数 `<router-link to="跳转的路径 参数">跳转说明文字</router-link>`
2.  编程式：使用js的方式来进行跳转
    
    1.  `this.$router.push()` 跳转到某个页面地址
    2.  `this.$router.go(n)`进行前进或者后退到第n个页面
    3.  push方法需要**额外注意**的地方：对含有动态参数的路由，在使用path属性定义跳转路径时不要只固定部分，如下
        
            // 路由规则部分
            routes: [
                { path: 'user/:id', component: User, name: 'aaa'}
            ]
            
            # 错误示范
            // 使用编程式跳转到该路径：错误示范，path含有两部分，这样定义只写了一部分，将不会匹配到上面的规则
            this.$router.push({ path: '/user', { params: { id: 13}}}) 
            
            // 正确方式1： 13可以用实际的变量
            this.$router.push({ path: '/user' + 13})
            
            // 正确方式2： 或者使用命名路由 先给上面的路由起名字aaa (随意起，将来一定要起见名知意的)
            this.$router.push({ name: 'aaa', { params: id: 123}})

## 路由导航守卫 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70]  
To要去的页面  
Form 从哪个页面过来  
Next 进行到下一步 next( ) 可以携带参数，参数可以是你想要到达的路径 如果不带参数就是to要去的路径

// 挂载路由导航守卫
    router.beforeEach((to, form, next) => { 
    	// to要去的路径，form从那个路径过来，next函数 放行
    	if (to.path === '/login') return next();
    	// 首先获取token令牌
    	const tonkenStr = window.sessionStorage.getItem('token');
    	if (!tonkenStr) return next('/login');
    	next();
    });

--------------------

## props解耦路由 ##

props  
类型：Array | Object

详细：【官网解释】

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

你可以基于对象的语法使用以下选项：

**type：** 可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。

default：any  
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。

required：Boolean  
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。

validator：Function  
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

首先要在router/index.vue所需要传参的路由上，开启路由的传参  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70]: /images/20230208/6f278f3726094e15b9fb59d3645369b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vdGlsaXR5X3NjeQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/5d48606790f14c03b8d1cefcaf55e591.png