vue-router

迷南。 2022-12-29 01:35 118阅读 0赞

### 文章目录 ###

*  vue-router
 *   *  动态路由匹配
     *  响应路由参数的变化
     *  路由懒加载
     *  关于this.$router.push、replace、go的用法和区别

# vue-router #

## 动态路由匹配 ##

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {
      template: '<div>User</div>'
    }
    
    const router = new VueRouter({
      routes: [
        // 动态路径参数 以冒号开头
        { path: '/user/:id', component: User }
      ]
    })

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {
      template: '<div>User {
       { $route.params.id }}</div>'
    }

## 响应路由参数的变化 ##

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着**组件的生命周期钩子不会再被调用。**

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

const User = {
      template: '...',
      watch: {
        $route(to, from) {
          // 对路由变化作出响应...
        }
      }
    }

## 路由懒加载 ##

为给客户更好的客户体验，组件加载速度更快一些，解决白屏问题。

使用ES的import

component: () => import( "../views/application/application")

## 关于this.$router.push、replace、go的用法和区别 ##

*  this.$router.push  
    跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

// 字符串
    this.$router.push('index') 
    
    // 对象
    this.$router.push({path: 'login-pw'})
    
    // 带参数
    this.$router.push({path: 'login-pw', query: {'account': this.account.account}})
    
    // 跳转后的页面获取参数
    this.account.account = this.$route.query.account

*  this.$router.replace  
    跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面
 *  this.$router.go(n)  
    向前或者向后跳转n个页面，n可为正整数或负整数