vue-router入门（2）—— 命名视图，重定向和别名，router.push()，router.replace(),router.go()

爱被打了一巴掌 2021-09-16 06:56 390阅读 0赞

关于vue-router的入门，个人感觉官网的东西写的有点乱，所以打算整理一些场景搭配使用。所以可能会漏掉一些个人觉得几乎用不到的功能。有兴趣的可以去官网看完整版。

### 1.命名视图 ###

需求：首页的头部比较特殊，我们以颜色区分，首页可能需要用到一个绿色的header，其他页面的头部则用红色的header。我们通过命名视图（name），来设置不同的路由中用不同的header和main模板。

用命名视图实现：

<router-view  name="header"></router-view> //header
    <router-view  name="main"></router-view> //内容区

//router文件夹下 index.js
    import Vue from 'vue'
    import Router from 'vue-router'
    // 探究一下vue-router
    import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
    import vueRouterPlay2 from '@/page/vueRouterPlay/vueRouterPlay2.vue'
    import header1 from '@/page/vueRouterPlay/header1.vue'
    import header2 from '@/page/vueRouterPlay/header2.vue'
    Vue.use(Router)
    export default new Router({
      routes: [
        {
          path: '/vueRouterPlay1',
          name: 'vueRouterPlay1',
          components: { // 注意这里是components 复数复数复数！
            'header': header1, //设置header模板
            'main': vueRouterPlay1 //设置main模板
          }
        },
        {
          path: '/vueRouterPlay2',
          name: 'vueRouterPlay2',
          components: { // 注意这里是components 复数复数复数！
            'header': header2,
            'main': vueRouterPlay2
          }
        }
      ]
    })

结果如下：

![70][]![70 1][]

### 2.重定向和别名 ###

重定向和别名的使用场景其实差不多，你希望用户在访问/index.htm,/index.html,/index的时候展示的都是首页，算是提升了用户操作的容错率，两者的唯一区别就是，是否修改url。

### 重定向 ###

// 方式一：字符串路径path
    { path: '/a', redirect: '/b' }
    // 方式二：name
    { path: '/a', redirect: {name: 'b'} }
    // 方式三：动态返回重定向目标
    { path: '/a', redirect: to => {
      /* 方法接收 目标路由 作为参数；return 重定向的 字符串路径/路径对象 */
    }}

### 别名 ###

“重定向”的意思是，当用户访问 `/a`时，URL 将会被替换成 `/b`，然后匹配路由为 `/b`，那么“别名”又是什么呢？

`/a` 的别名是 `/b`，意味着，当用户访问 `/b` 时，URL 会保持为 `/b`，但是路由匹配则为 `/a`，就像用户访问 `/a` 一样。

上面对应的路由配置为：

const router = new VueRouter({
      routes: [
        { path: '/a', component: A, alias: '/b' }
      ]
    })

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

### 3.router.push()，router.repalce()，router.go()使用 ###

router对象提供了三个function用于跳转链接。

router.push( ... ) =>跳转到某个子页面，并在history中添加一条记录

router.repalce( ... ) =>替换当前的页面，其实也可以理解为跳转，和push的区别就是不会在history中添加记录

router.go(number) =>刚才提到的history，在go()中被使用，跳转到上一页就go(-1)，跳转到下一页就go(1)，当然实现跳转的前提都是history中有记录。

### `router.push(location, onComplete?, onAbort?)` ###

<table> 
 <thead> 
  <tr> 
   <th>声明式</th> 
   <th>编程式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;router-link :to="..."&gt;</code></td> 
   <td><code>router.push(...)</code></td> 
  </tr> 
 </tbody> 
</table>

// 方式一：字符串路径
    router.push('/user')
    // 方式二：path对象
    router.push({ path: '/user' })
    // 方式三：路由名称
    router.push({ name: 'user'})

**注意：如果提供了 path，params 会被忽略，query不会！！**

// 不生效
    router.push({ path: '/user', params: { id: 1 }})
    // params生效 /user/1
    router.push({ name: 'user', params: { id: 1 }}) // 使用name方式
    router.push({ path: `/user/1` }) // 直接在path上扩充
    // query不受影响 /user?id=1
    router.push({ path: '/user', query: { id: 1 }})

### `router.replace(location, onComplete?, onAbort?)` ###

<table> 
 <thead> 
  <tr> 
   <th>声明式</th> 
   <th>编程式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;router-link :to="..." replace&gt;</code></td> 
   <td><code>router.replace(...)</code></td> 
  </tr> 
 </tbody> 
</table>

跟`router.push` 很像，唯一的不同就是，它不会向 history 添加新记录！

### `router.go(n)` ###

在 history 记录中向前或者后退多少步，类似 `window.history.go(n)`

[70]: https://img-blog.csdn.net/20180904103342797?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20210813/161f9d001f2d477ab2bf042c11465ea2.png