vue-动态路由（编程式导航）

• 路由导航功能是不能传递参数的，也就是说是静态路由。而能传递参数的路由模式，由于可以传递参数，所以其对应的路由数量是不确定的，称为动态路由。
• 将参数作为路由。
• 在参数名前面加上 ：，然后将参数写在路由的path内。

{
    path: '/Detail/:myid', // Detail/aa  动态路由  detail路径不存在，必须加/aa
    component: Detail
},

• 这样定义之后，vue-router就会匹配所有的：/Detail/1，/Detail/2，/Detail/3 ……，所以说这样定义的路由的数量是不确定的。

<template>
  <div>detail</div>
</template>
<script>
export default {
  mounted() {
    console.log("要id获取详情信息", this.$route.params.myid);
    // params:
    // myid: "coke"
  }
};
</script>

• 通过 $route.params这个属性获取指定的参数值。
• Detail.vue位置：import Detail from '../views/File/Detail'
• Nowplaying.vue:

<template>
  <div>
    nowplaying
    <ul>
      <li v-for="data in datalist" :key="data" @click="changePage(data)">{{data}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datalist: ["coke", "tiramisu", "cake"]
    };
  },
  methods: {
    changePage(id) {
      console.log(id);
      // 编程式导航-路径跳转
      this.$router.push(`/detail/${id}`);
    }
  }
};
</script>

• 命名路由：有时候，通过一个名称来标识一个路由会显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，可以在创建Router实例的时候，在routes配置中给某个路由设置名称。

{
    path: '/Detail/:myid', // Detail/aa  动态路由  detail路径不存在，必须加/aa
    name: 'cannoli',
    component: Detail
  },

• 要链接到一个命名路由，可以给router-link的to属性传一个对象：

<router-link :to="{name:'user',params:{myid:id}}"></router-link>

• 这跟代码调用router.push()是一回事：

this.$router.push({ name: 'cannoli', params: { myid: id } })