（二、v-router动态路由匹配）

v-router动态路由

（1）初期

• （1）在模块化工程中使用，必须要通过Vue.use()明确安装路由功能。

// 在router文件中的index.js，
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

（2）动态路由匹配

• （1.）动态路径参数：一个路径参数使用:标记。当匹配到一个路由时，参数值会被设置到$this.route.params,可以在每个组件内使用。
• （2.）如何使用：

// User.vue页面
<template>
    <div class="User">
       this is id : {{$route.params.id}}<br>
       she name : {{$route.params.admin}}
    </div>
</template>
<script>
export default {
    name:"User"
}
</script>

// router的index.js
import Vue from "vue";
import VueRouter from "vue-router";
// 引入User组件
import User from "../views/User.vue";

Vue.use(VueRouter);

const routes = [
  {
  // 传两个动态参数id ，admin写法
 	path: "/User/:id/goods/:admin",
 	
  // 传一个动态参数id
    path: "/User/:id",
    name: "User",
    component: User
  }
];

const router = new VueRouter({
  mode: 'history',  // 可去掉地址中的"#"
  routes
});

export default router;

• 传一个动态参数id：在浏览器地址栏内输入如："http://localhost:3000/User/45"
• 显示：
  
• 传两个动态参数id ，admin：在浏览器地址栏内输入如："http://localhost:3000/User/45/goods/kiki"
• 显示：
  
• （3.）应用：组件利用$route.params.XXX，来获取到你需要的数据。例如：用户登录时获取用户名，更新输出用户ID。或者点击不同商品更新展示页面。
• 贴上大佬链接帮助理解：
• (1) Vue 动态路由详解及实例
• (2)vue-router入门（1）—— 基本路由，动态匹配路由，嵌套路由

（3）响应路由参数的变化

• 使用路由参数时，如/user/foo导航到/user/bar，原来的组件会被复用，两个路由渲染的是同一个组件，复用更高效，同时组件生命周期钩子不会再被调用。
• （1.）监测路由参数变化：如果想对路由参数变化作出响应的话。可以watch（监测变化）$route对象：
• 例：

<template>
    <div class="User">
       此时id是:{{id}}<br>
       <router-link :to='"/User/haha"'>跳转haha</router-link>
    </div>
</template>
<script>
export default {
    name:"User",
    data(){
        return {
            id: ''
        }
    },
    mounted() {
    // 首次加载获取数据
        console.log("我执行了")
        this.id = this.$route.params.id
    },
    watch: {
    $route(to, from){
      console.log("change!!!")
      this.id = this.$route.params.id;
    }
  }
}
</script>

• （2）或者使用beforeRouteUpdate 导航守卫。
• （3）通配符：捕获所有路由或404 Not Found路由。常规参数只会匹配被/分割url片段中的字符。匹配任何路由使用*
• 例：

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}