【Vue】017. Vue-Router（五）—— 更多配置本文主要介绍Vue-Router中router-link、r

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
}

~~可能会有不对的地方，望海涵~~

~~本人前端小菜鸡，如有不对请谅解~~

【Vue】017. Vue-Router（五）—— 更多配置