路由 – 博客

路由

安装Router

使用以下命令安装

yarn add vue-router

创建路由

在src下创建文件夹router/index.ts(index.js)

// src/router/index.ts
import {createRouter, createWebHistory} from "vue-router";

import Home from "../pages/Home.vue";
import IncludeChildRoutes from "../pages/IncludeChildRoutes.vue";
import ChildRoute from "../pages/ChildRoute.vue";

const router=createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: "主页"
      path: "/home",
      component: Home
    },
    {
      name: "含有子路由的路由"
      path: "/includeChildRoutes",
      component: IncludeChildRoutes,
      children: [
        {
          // 注意，子路由不要需添加斜线
          path: "childRoute",
          components: ChildRoute
        }
      ]
    },
    {
      path: '/',
      // 重定向
      redirect: '/home'
    }
    // ... 其它路由
  ]
})

在main.ts(main.js)中引入路由器

// src/main.ts
// 注意，如果你的路由文件名不是index，需要指定文件
import router from "./router";

createApp(app).use(router).mount("#app")

使用路由

展示路由内容

在vue文件中使用RouterView来展现路由内容

<template>
  <!-- 其它内容 -->
  <RouterView/>
</template>

<script lang=ts setup>
import { RouterView } from 'vue-router'
</script>

添加路由切换的按钮

<template>
  <!-- 其它内容 -->
  <!-- active-class中使用当/home时的类样式表 -->
  <RouterLink to="/home" active-class="">切换到/home页面</RouterLink>
  <!-- 或者也可以这么写 -->
  <RouterLink :to="{path: '/home', query:{/** Query参数 */}}" active-class="">切换到/home页面</RouterLink>
  <!-- 或者根据路由名称跳转 -->
  <RouterLink :to="{name: '主页', query:{/** Query参数 */}}" active-class="">切换到/home页面</RouterLink>
</template>

<script lang=ts setup>
import { RouterLink } from 'vue-router'
</script>

传递参数

路由一共有两种参数，query和param

query传递参数

query传递参数的方式为<URL>?key1=value1&key2=value2，不同参数中间用&分割

直接可以通过RouterLink中的to传递参数:

<RouterLink to="/home?key1=value1&key2=value2" active-class="">
  切换到/home页面
</RouterLink>
<!-- 或者 -->
<RouterLink :to="{path: '/home', query:{key1: 'value1', key2: 'value2'}}" active-class="">
  切换到/home页面
</RouterLink>

在接收的时候:

import { useRoute } from 'vue-router';
import { ref } from 'vue';
const route=useRoute();
// query<Object> 的内容为:
// 注意需要用ref包裹使其成为响应式
const query=ref(route.query)

param传递参数

通过路由地址传递为<URL>/value1/value2

需要在router中添加占位符

const router=createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: "主页"
      // 在路径上添加占位符
      path: "/home/:key1/:key2",
      // 对于可选参数，可以添加问号
      // path: "/home/:key1/:key2?"
      component: Home
    },
    // ... 其它路由
  ]
})

直接可以通过RouterLink中的to传递参数

<RouterLink to="/home/value1/value2" active-class="">
  切换到/home页面
</RouterLink>
<!-- 或者 -->
<RouterLink :to="{
  // 注意只能用name不能使用path
  name: '/home',
  params: {
    key1: 'value1',
    key2: 'value2'
  }
}" active-class="">
  切换到/home页面
</RouterLink>

在接收的时候:

import { useRoute } from 'vue-router';
import { ref } from 'vue';
const route=useRoute();
// query<Object> 的内容为:
// 注意需要用ref包裹使其成为响应式
const query=ref(route.params)

路由props配置

修改路由配置

const router=createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: "主页"
      path: "/home/:key1/:key2",
      component: Home,
      // 设定props为true，仅限于params参数
      props: true,
      // 或者可以这样写决定使用什么样的参数
      props(route){
        return {
          return route.query
        }
      }
    },
    // ... 其它路由
  ]
})

在组件中

defineProps(['key1', 'key2'])

路由的replace属性

在RouterLink标签上添加replace即可

编程式导航

可以脱离RouterLink实现路由跳转

// 注意这里导入的是useRouter而不是useRoute
import {useRouter} from "vue-router"
const router=useRouter();
const linkto=()=>{
  router.push("/home");
  // 可以传递参数
  router.push({
    path: '/home', 
    query: {key1: 'value1', key2: 'value2'}
  })
}

pinia