Vue-cli学习-动态路由匹配

动态路由匹配

所谓动态路由匹配：就是将不确定的参数进行路由映射到同一个组件上去
比如：user?id=5，这个 5 就是动态的数值，最终路径：user/5
官方案例:

Vue-cli学习-动态路由匹配_IT

创建user页面组件
<template>
<!--  <h3>User Id : {{ $route.query.id }}</h3>-->
  <h3>User Id : {{ $route.params.id }}</h3>
</template>

<script>
export default {
  name: "User"
}
</script>

<style scoped>

</style>
使用动态路由，先在index.js中配置path的路由相关规则
const routes = [
  {
    ······
  },{
    // path: '/user/',
    path: '/user/:id',
    name: 'User',
    component: User
  },{
    ······
  }
app.vue中创建两个不同参数但同一个组件调用的链接，方便来回点击调试
      <router-link to="/user/5">user5</router-link>
      |
      <router-link to="/user/6">user6</router-link>
      |

Vue-cli学习-动态路由匹配_IT_02

watch相关

可以通过 watch 监听对象，来监听$route(to, from)判断去处和来源
在app.vue中，创建script，来监听动态路由变化


<script>
export default {
  watch: {
    $route(to, from) {
      console.log(to);
      console.log(from)
    }
  }
}
</script>

Vue-cli学习-动态路由匹配_IT_03

404

有时路由不存在会得不到任何结果，可以设置捕获所有路由或 404
将 path 设置为*号，将会捕获任何没有得到匹配的路由

  {
    path: '*',
    name: 'Home',
    component: Home
  },