vue学习笔记总结（vue-router 动态路由）

vue-router 动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于ID各不相同的用户，都要使用这个组件来渲染。例如可能有/user/123或者/user/456，除了/user之外，后面还跟上了用户ID。这种path和component的匹配关系，叫动态路由。

动态路由实现

新建一个User组件

<template>
  <div class="page-contianer">
    <h2>这是用户界面</h2>
    <p>这里是用户页面的内容。</p>
    <p>用户ID是: {{ userId }}</p>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'User',
  computed:{
    userId() {
      return this.$route.params.userId
    }
  }
}
</script>
<style scoped>
</style>

该组件定义一个计算属性，通过this.$route.params.userId获取处于激活状态的路由参数userId。

router/index.js

  {
    path: '/user/:userId',
    name: 'User',
    component: () => import('@/components/User') //懒加载组件
  }

使用:userId指定动态路由参数userId。

app.vue中添加user页面的<router-link>，并添加userId变量

<router-link :to="/user/ + userId">用户</router-link>

data (){
  return {
    userId: '123'
  }
}

$route和$router

注意$route和$router的区别：

$router指的是我们创建的router实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性，如history对象等。

而this.$route指的是当前处于激活状态的路由，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录。

• $route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/abc
• $route.params 对象，含路有种的动态片段和全匹配片段的键值对，不会拼接到路由的url后面
• $route.query 对象，包含路由中查询参数的键值对。会拼接到路由url后面
• $route.router 路由规则所属的路由器
• $route.matchd 数组，包含当前匹配的路径中所包含的所有片段所对象的配置参数对象
• $route.name 当前路由的名字，如果没有使用具体路径，则名字为空