017.Vue-Router（五）

---

01. 关于router-view

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

（1）组件配置

• 在组件里，对 配置name属性，用于匹配对应的路由

  没有name属性的将会有一个默认的name属性——default

（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.push()的配置一致

  <router-link to="home">Homerouter-link>
  <router-link :to="{ path: 'home' }">Homerouter-link>
  <router-link :to="{ name: 'user', params: { userId: 123 }}">Userrouter-link>
  <router-link :to="{ path: 'register', query: { plan: 'private' }}">Registerrouter-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 属性

    • 可以更改渲染标签
    • 默认渲染为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">RouterLinkrouter-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】，全局配置 默认的激活类名

• linkActiveClass

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

  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}