2021-11-13 vue笔记-路由vue-router(三) vue实现动态路由和命名路由,vue-router配置history模式

1.动态路由的概念

定义

可以根据不同的需求加载不同的路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下路径:
/user/aaa或/user/bbb
除了有前面的/user之外，后面还跟上了用户ID
这种path和Component匹配关系，我们称之为动态路由（也是路由传递数据的一种方式）

目的

完成不同的实现及页面的渲染。

分类

动态的路由存储可分为两种:
一种是将路由存储到前端
另一种是将路由存储到数据库

优点

灵活，无需手工维护，可以使用一个页面对路由进行维护

2.动态路由的使用步骤

step1:router下index.js配置路由

{
   
    path：'/user/:id',
    component: User
}

step2:进入user页面点击路径

<template>
  <div id="detail">
    <router-link :to="'/user/'+userId"></router-link>
  </div>
</template>
<script>
  export default {
    name: 'detail',
    data() {
    	return {
    		userId: '1001'
    	}
    }
  }

step3:user模板·页面获取id方式

<h2>{
  {$route.params.id}}</h2>

3.动态路由例子

nowPlaying.vue

在nowPlaying路由中设置点击跳转到Detail动态路由,用到的方法是:
this.$router.push(‘/Detail’);
想要点击跳转到哪个页面,就在点击事件函数中push 到哪个页面

<template>
  <div>nowPlaying...
      <ul>
        <!-- step1: 把datalist的数据渲染出来-->
        <li v-for="data in datalist" :key="data" @click="handleChangePage(data)">
          {
  {data}}
        </li>
  </ul>
  </div>

</template>