标签：Vue cli route user path id 路由 User

动态路由匹配

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

创建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>
      |

watch相关

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

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

404

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

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

标签：Vue,cli,route,user,path,id,路由,User
来源： https://www.cnblogs.com/keacua/p/15305393.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。