Vue-Router - 路由参数携带/动态路由 - 《前端框架》

带参数的动态路由匹配
- 动态传参数：
路由元信息
动态路由

带参数的动态路由匹配

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能会有一个 classify 组件，它应该对所有的商品进行渲染，但是商品的分类不同。在Vue Router中，我们可以在路径中使用一个动态段来实现，我们称之为路径参数：

什么是动态路由？ url是变化的，但是组件是同一个组件，根据参数不同显示内容不同动态传参数

我们从一个组件中将数据携带在url上传递到另一个组件中去

动态接参数：

我们从url中获取参数，然后拿到参数之后使用，如作为请求的参数

动态传参数：

通过router-link的to属性传递参数给路径

src/pages/classify/index.vue

<template>
  <div>
    分类别组件
    <hr />
    <ul>
      <li>
          <!--  这里的params和query就是可以传递到另外一个路由中到数据 -->
          <!--  路由后面需要写:id} -->
        <router-link :to="{name: 'list',params: {id: 1,},query: {a: 1,b: 1,title:'衣服'},}">衣服</router-link>
      </li>
      <li>
        <router-link :to="{name: 'list',params: {id: 2,},query: {a: 2,b: 2,title:'美食'},}">美食</router-link>
      </li>
      <li>
        <router-link :to="{name: 'list',params: {id: 3,},query: {a: 3,b: 3,title:'电器'},}">电器</router-link>
      </li>
    </ul>
  </div>
</template>

const routes = [{
  path: "/list/:id", // 这里需要加个id
  component: () => import(/*webpackChunkName:'list'*/ "../pages/list/index.vue"),
    name: "list",
},]

不写id时 http://localhost:8080/list?a=1&b=1&title=衣服写了id后 http://localhost:8080/list/1?a=1&b=1&title=衣服

展示：

动态接参数

通过useRoute这个Hook来接受url上的参数，然后使用
src/pages/list/index.vue

<template>
    <div>
        list列表组件
        <div>
            {{id}}
            {{a}}
            {{b}}
            {{title}}
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive,toRefs } from 'vue'
import {useRoute} from 'vue-router'
export default defineComponent({
    setup() {
        const state=reactive({
            id:'',
            a:'',
            b:'',
            title:''
        })
        const route=useRoute()
        // 数据在这里面
        console.log(route.query)
        console.log(route)
        onMounted(()=>{
            state.id=route.params.id;
            state.a=route.query.a;
            state.b=route.query.b;
            state.title=route.query.title;
        })
        return {
            ...toRefs(state)
        }
    },
})
</script>

路由元信息

应用：实现头部内容变化、面包屑导航、权限操作

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接受属性对象等 meta 属性来实现，并且它可以在路由地址和导航守卫上被访问到。定义路由的时候你可以这样配置 meta 字段：

// src/router/index.ts
const routers = [{
  path: "/about",
  component: () =>
    import(/*webpackChunkName:'about'*/ "../pages/about/index.vue"),
  name: "about",
  meta: {
    title: "携带点内容在这个路由中",
  },
}]
//src/pages/about/index.vue
<template>
    <div>
        关于我们
        {{title}}
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import{useRoute} from 'vue-router'
export default defineComponent({
    setup() {
        const route =useRoute()
        console.log(route.meta.title)
        return{
            title:route.meta.title
        }
    },
})
</script>

动态路由

添加路由到你的路由上通常是通过 routes 配置来完成，但是在某些情况下，你可能想在应用程序已经运行的时候添加或者删除路由。

添加路由

动态路由主要通过两个函数实现。 router.addRoute() 和 router.removeRoute() 。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。
hasRouter :确认是否存在指定名称的路由

<template>
  <div>
    智能应用
    <button @click="addRoutes">添加</button>
    <button @click="remove">删除</button>
    <router-link to="/lakers">lakers</router-link>
    <button @click="hasRouter">是否有路由</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import{useRouter} from 'vue-router'
export default defineComponent({
  setup() {
      const router =useRouter()
    // 追加
      const addRoutes=()=>{
          router.addRoute({
              path:'/lakers',
              component:()=>import(/*webpackChunName:'about'*/'../lakers/index.vue'),
              name:'lakers'
          })
      }
      // 删除
      const remove=()=>{
          router.removeRoute('lakers') // 填name
      }
    //   判断
      const hasRouter=()=>[
          console.log(router.hasRoute('lakers'))
      ]
      return {
          addRoutes,remove,hasRouter
      }
  },
});
</script>