017.Vue-Router

Posted 2022-12-10 Composition55555

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了017.Vue-Router相关的知识，希望对你有一定的参考价值。

文章目录

01. 关于router-view

单页面多路由区域操作
- 在同一个页面里，我们需要展示多个视图区域，即多个 <router-view>区域
- 此时，我们需要通过对视图进行命名来达到效果，即命名视图

（1）组件配置

在组件里，对 <router-view>配置name属性，用于匹配对应的路由

没有name属性的<router-view>将会有一个默认的name属性——default

<template>
    <div id="app">
        <router-link to="/home">Home</router-link>
        <router-link to="/about">About</router-link>
        
        <router-view name="left"></router-view>
        <router-view></router-view>
        <router-view name="right"></router-view>
    </div>
</template>

（2）路由配置

路由配置内，需要将原来的component字段，改为components字段，因为需要配置多个组件

并在其中根据组件配置中的name属性对路由进行配置

export default new Router(
    routes: [
        
            path: '/home',
            name: 'Home',
            components: 
                // default字段的组件将显示在未设置 [name] 属性的 router-view 内
                default: HomeDefault,
              	// left字段的组件将显示在 [name=left] 的 router-view 内
                left: HomeLeft,
                // 同上...
                right: HomeRight
            
        ,
        
            path: '/about',
            name: 'About',
            components: 
                default: AboutDefault,
                left: AboutLeft,
                right: AboutRight
            
        
    ]
)

02. 关于router-link

（1）配置项

<router-link>的基本配置与$router.push()的配置一致

<router-link to="home">Home</router-link>
<router-link :to=" path: 'home' ">Home</router-link>
<router-link :to=" name: 'user', params:  userId: 123 ">User</router-link>
<router-link :to=" path: 'register', query:  plan: 'private' ">Register</router-link>

<router-link>还可以进行一些额外的配置
- 设置 replace 属性的话
  - 当点击时，相当于调用 router.replace() ，不会留下 history 记录
```
<router-link :to=" path: '/abc'" replace></router-link>
```
- 设置 append 属性后
  - 则在当前（相对）路径前添加基路径
    
    例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
```
<router-link :to=" path: 'relative/path'" append></router-link>
```
- 设置 tag 属性
  - 可以更改渲染标签
  - <router-link>默认渲染为a标签，设置了tag属性后，则可以更改这个默认标签
```
<router-link to="/foo" tag="li"></router-link>

<li></li>
```
- 设置exact属性
  - 设置标签是否激活
```

<router-link to="/" exact>
```

（2）注册事件无效解决方法

在@click后面加上native，使其变为原生事件，即可正常注册事件
```
<router-link @click.native="change">RouterLink</router-link>
```

03. `Router`配置拓展

（1）基本配置项

routes：路由对象配置
mode：设置路由模式
base：设置基准路径

（2）scrollBehavior

用于控制，在页面跳转后页面的滚动行为

只适用于支持history.pushState的浏览器

const router = new Router(    routes,    scrollBehavior (to, from, savedPostion)         // do something        return ...    )

参数：

to：表示将要前往的路由对象

from：表示正要离开的路由对象

savedPosition：这个参数只有在使用浏览器的前进/后退按钮时才可用

返回值：
这个方法返回将要滚动到的位置的对象信息
return  x: 0, y: 0  // 表示滚动到  (0,0)位置，即页面顶部return  selector: to.hash  // 表示滚动到锚点(如果有)// 异步滚动return new Promise(()=>    // 返回一个 Promise对象来得出预期的位置)// 平滑滚动return     behavior: 'smooth' // 添加 behavior 选项到返回的对象中

（3）fallback

当浏览器不支持 history.pushState时，可以控制路由是否应该回退到 hash 模式
- 默认值为 true
- 如果设置为false，则跳转后会刷新整个页面，相当于多页应用

（4）class配置

linkExactActiveClass
- 默认值【router-link-active】，全局配置 <router-link> 默认的激活类名

linkActiveClass

默认值【router-link-exact-active】，全局配置 <router-link> 默认的精确激活的类

return new Router(    // 点击class名字    linkActiveClass: 'active-link', // 匹配到其中一个子集    linkExactActiveClass: 'exact-active-link',// 完全匹配)

（5）query参数加密

parseQuery
- 该方法用于解析地址栏参数，可以接收一个字符串参数
  - 在new Router中传入这个属性，则在解析query参数的时候，会执行这个方法，不会执行默认的方法
  - 这个方法只会解析path中携带的参数，和刷新浏览器时地址栏的参数
  - 不会解析query对象中的参数

stringifyQuery

该方法用于序列化传入的query参数，可以接收一个对象参数
- 在new Router中传入这个属性，则在序列化query参数的时候，会执行这个方法，不会执行默认的方法
- 序列化之后的参数将显示在地址栏，取代默认的参数

const router = new VueRouter(    routes,    mode: 'history',    base: '/app/',    parseQuery: parseQuery,    stringifyQuery: stringifyQuery)// 解析, 接收一个字符串参数const parseQuery = query =>     // do something// 加密, 接收一个对象参数const stringifyQuery = obj =>     // do something