router route

第一：控制台输出

router的输出中mode属性，history属性是我们比较熟悉的

route的输出中都是我们平常可以用到的属性’

第二：注入的属性 （区别）

通过在 Vue 根实例的 router 配置传入 router 实例，下面这些属性成员会被注入到每个子组件。

（1）this.$router

        router 实例。

（2）this.$route

        当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。

第三：详细介绍router的常用用法：

（1）router实现路由跳转的两种方式，声明式、编程式（两个实现的功能是一样的，只是一个是写在html模板中，一个是写在jsvascript代码中）

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这两句代码实现同一个功能
router.push({ name: 'user', params: { userId: 123 }})

（2）编程式方式二：router.psuh 

在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

编程式：该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：path和params不能一起用，使用path如果再使用params，params会被忽略，所以

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效 是错误的写法
router.push({ path: '/user', params: { userId }}) // -> /user

 （2）编程式方式二:router.replace

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

（3）访问路由

methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }

（4）router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

第四：详细介绍route的常用用法：

（1）$route.path

•   类型: string
•   字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"

（2）$route.params

• 类型: Object

   例： routes：[   {path: '/user/:id', component: user}  ]  为你配的路由，此时this.$route.params.id就是你的参数id的值

• 一个 key/value 对象，包含了动态片段和全匹配片段，是你自己写的路由的参数，如果没有路由参数，就是一个空对象。

（3）$route.query

• 类型: Object
• 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

（4）$route.hash

• 类型: string
• 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

（5）$route.fullPath

• 类型: string
• 完成解析后的 URL，包含查询参数和 hash 的完整路径。

（6）$route.name

• 当前路由的名称 (查看命名路由)

 （7）路由的监测

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