Vue知识点整理（六）- vue-router（2）- query参数、命名路由、params参数、replace属性

目录

一、路由的query参数

二、命名路由

三、路由的params参数

四、路由的props配置

五、router-link的replace属性

六、案例练习

6.1 src/pages/Detail.vue

6.2 src/router/index.js

6.3 Message.vue

6.4 News.vue

---

一、路由的query参数

1.传递参数，例如：

    <!-- 跳转并携带query参数，to的字符串写法 -->
    <!-- <router-link :to="`/一级路径/二级路径/三级路径?参数1=${...}&参数2=${...}`">跳转</router-link> -->

    <!-- 跳转并携带query参数，to的对象写法 -->
    <router-link
      :to="{
        path:'/一级路径/二级路径/三级路径',
        query:{
          参数1:...,
          参数2:...
        }
      }"
      >跳转</router-link

2. 接收参数：

$route.query.参数1
$route.query.参数2

二、命名路由

1. 作用：可以简化路由的跳转

2. 如何使用

（1）给路由命名，例如

    {
      path: "/demo",
      component: Demo,
      children: [
        {
          path: "test",
          component: Test,
          children: [
            {
              name: "welcome", // 给路由命名
              path: "hello",
              component: Hello,
            },
          ],
        },
      ],
    },

（2）简化跳转

    <!-- 简化前，需要些完整路径 -->
    <router-link to="/demo/test/hello">跳转</router-link>

    <!-- 简化后，直接通过名字跳转 -->
    <router-link :to="{ name: 'welcome' }">跳转</router-link>

    <!-- 简化写法配合传递参数 -->
    <router-link 
    :to="{
      name:'welcome',
      query:{
        参数1:...,
        参数2:...,
      }
    }"> 
    跳转 
    </router-link>

三、路由的params参数

1. 配置路由，声明接收 params 参数，例如：

    {
      path: "/demo",
      component: Demo,
      children: [
        {
          path: "test",
          component: Test,
          children: [
            {
              name: "welcome",
              path: "hello/:参数1/:参数2", // 使用占位符声明接收params参数
              component: Hello,
            },
          ],
        },
      ],
    },

2. 传递参数：

    <!-- 跳转并携带params参数，to的字符串写法 -->
    <!-- <router-link :to="`/一级路径/二级路径/三级路径/${...}/${...}`">跳转</router-link> -->

    <!-- 跳转并携带params参数，to的对象写法 -->
    <router-link
      :to="{
        name:'welcome',
        params:{
          参数1:...,
          参数2:...
        }
      }"
      >跳转</router-link

注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

3. 接收参数：

$route.params.参数1
$route.params.参数2

四、路由的props配置

作用：让路由组件更方便接收到参数

例如：

            {
              name: "detail",
              path: "detail/:id",
              component: "Detail",

              // 第一种写法：props值为对象，该对象中的所有的key-value的组合最终都会通过props传给Detail组件
              // props: { a: 9527 },

              // 第二种写法：props为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
              // props: true,

              // 第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
              props(route) {
                return {
                  id: route.query.id,
                };
              },
            },

五、router-link的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别是 push 和 replace，push是追加历史记录，replace是替换当前记录。路由跳转的时候默认是push

开启replace模式：

<router-link :replace="true" ...></router-link>

// 简写形式
<router-link replace ...></router-link>

六、案例练习

 

• 将 News 和 Message 路由组件内的参数传递给 Detail路由组件，其中Message携带params参数，News携带query参数
• 跳转Detail路由组件时操作浏览器历史记录的模式设置为：replace模式

以Vue知识点整理（六）- vue-router（1）第四节 - 案例练习为基础

6.1 src/pages/Detail.vue

Detail路由组件

<template>
  <ul>
    <li>消息编号：{{ id }}</li>
    <li>消息标题：{{ title }}</li>
  </ul>
</template>

<script>
export default {
  name: "Detail",
  props: ["id", "title"],
};
</script>

6.2 src/router/index.js

• 通过children配置多级路由
• Message路由使用占位符声明接收params参数， props配置为布尔值
• News路由props配置为函数

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from "../pages/About.vue";
import Home from "../pages/Home.vue";
import Message from "../pages/Message.vue";
import News from "../pages/News.vue";
import Detail from "../pages/Detail.vue";

export default new VueRouter({
  routes: [
    {
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
      // 通过children配置二级路由
      children: [
        {
          path: "message",
          component: Message,
          children: [
            {
              name: "detail1",
              path: "detail/:id/:title", // 使用占位符声明接收params参数
              component: Detail,
              // props配置：props为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
              props: true,
            },
          ],
        },
        {
          path: "news",
          component: News,
          children: [
            {
              name: "detail2",
              path: "detail",
              component: Detail,
              // props配置：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
              props($route) {
                return { id: $route.query.id, title: $route.query.title };
              },
            },
          ],
        },
      ],
    },
  ],
});

6.3 Message.vue

• 添加了messageList数据
• router-link标签跳转时携带params参数且开启replace模式

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 跳转并携带params参数，to的对象写法 -->
        <!-- 开启replace模式 -->
        <router-link
          replace
          :to="{ name: 'detail1', params: { id: m.id, title: m.title } }"
          active-class="active"
          >{{ m.title }}</router-link
        >
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        { id: "001", title: "消息001" },
        { id: "002", title: "消息002" },
        { id: "003", title: "消息003" },
      ],
    };
  },
};
</script>

<style></style>

6.4 News.vue

• 添加了newsList数据
• router-link标签跳转时携带query参数且开启replace模式

<template>
  <div>
    <ul>
      <li v-for="n in newsList" :key="n.id">
        <!-- 跳转并携带query参数，to的对象写法 -->
        <!-- 开启replace模式 -->
        <router-link
          :replace="true"
          :to="{ name: 'detail2', query: { id: n.id, title: n.title } }"
          active-class="active"
          >{{ n.title }}</router-link
        >
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "News",
  data() {
    return {
      newsList: [
        { id: "001", title: "新闻001" },
        { id: "002", title: "新闻002" },
        { id: "003", title: "新闻003" },
      ],
    };
  },
};
</script>

<style></style>