Vue3_VueRouter4如何使用（一）

Vue Router 4是Vue.js框架中用于实现客户端路由的官方库。它允许你构建单页面应用程序（SPA），通过在不同的页面之间进行导航，而无需重新加载整个页面。下面我将详细介绍Vue Router 4的一些关键方面。

基本用法

Vue Router的基本用法涉及到安装和配置。首先，你需要使用npm或yarn安装Vue Router：

npm install vue-router@4

然后，在你的Vue.js项目中，你可以通过以下方式使用Vue Router：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

// 导入组件
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes: RouteRecordRaw[] = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

const app = createApp(App)

app.use(router)
app.mount('#app')

这是一个简单的配置，其中routes数组定义了不同路径对应的组件。createRouter函数创建了一个路由实例，然后通过app.use(router)将其集成到Vue应用中。

路由跳转

在Vue Router 4中，有多种方式进行路由跳转。以下是一些常见的方法：

路由模式

1. Hash 模式：

   • 特点 ：在 URL 中的哈希部分（#）进行路由，即路径中带有 #。
   • 优点：在不同的浏览器中兼容性较好，且不需要服务器特殊配置。
   • 缺点 ：URL 中含有 # 符号，可能不太美观。

   const router = createRouter({
     history: createWebHashHistory(),
     routes
   });

2. History 模式：

   • 特点 ：使用浏览器的 History API，不包含 # 符号，看起来更干净。
   • 优点 ：URL 更加友好，没有 # 符号。
   • 缺点：需要服务器支持，以避免在直接访问页面时出现 404 错误。

   const router = createRouter({
     history: createWebHistory(),
     routes
   });

在使用时，可以根据项目的需求选择适合的路由模式。大多数情况下，如果应用是一个单页应用（SPA），Hash 模式是一个简单且可行的选择。如果你想要更友好的 URL，可以考虑使用 History 模式，但需要确保服务器能够正确处理这种模式的路由。

路由懒加载

路由懒加载是一种优化技术，它允许你在需要时才加载特定路由的代码，而不是在应用初始化时就加载所有路由的代码。这可以显著减小初始加载的文件大小，提高应用的性能。在 Vue Router 4 中，你可以使用路由懒加载来实现这一点。

vue-router支持动态import ，所有被导入的模块，在加载时就被编译。

普通引入

import { createRouter, createWebHashHistory } from "vue-router";
import HelloWorld from "../components/HelloWorld.vue";
import Home from "../components/Home.vue";

const routes = [
  {
    path: '/hello',
    component: HelloWorld,
  },
  {
    path: '/home',
    component: Home,
  }
];

const router = createRouter({
  history: createWebHashHistory('/'),
  routes
});

export default router;

动态引入

import { createRouter,createWebHashHistory } from "vue-router";

const routes = [
 {
  path:'/hello',
  component:()=>import("../components/HelloWorld.vue")
 },
 {
  path:'/home',
  component:()=>import("../components/Home.vue")
 }
]

const router = createRouter({
 history:createWebHashHistory('/'),
 routes
})

export default router

编程式导航

在Vue.js中，编程式导航是通过Vue Router提供的$router对象实现的。这个对象包含了一些方法，例如push和replace，允许你在JavaScript代码中进行路由导航。

声明式	编程式
<router-link :to="...">	router.push(...)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

路由传参

在Vue Router中，你可以通过路由传递参数。有几种方法可以实现这一点，下面是其中两种常见的方式：

路由参数

你可以在路由路径中使用动态参数，然后在组件中通过$route.params来访问这些参数。

路由配置：

// router.js
const routes = [
  { path: '/user/:id', component: User }
]

组件中的使用：

// User.vue
export default {
  mounted() {
    // 访问路由参数
    const userId = this.$route.params.id
    console.log('User ID:', userId)
  }
}

查询参数

你也可以使用查询参数传递数据，这些参数会附加在URL的查询字符串中。

路由配置：

// router.js
const routes = [
  { path: '/user', component: User }
]

组件中的使用：

// User.vue
export default {
  mounted() {
    // 访问查询参数
    const userId = this.$route.query.id
    console.log('User ID:', userId)
  }
}

在路由导航中传递参数 如果你想在编程式导航时传递参数，可以在$router.push()方法中传递参数：

// 在某个方法或生命周期钩子中
this.$router.push({ path: '/user', query: { id: 123 } })

这将导航到 /user?id=123，然后在目标组件中可以通过this.$route.query.id访问这个参数。

选择适合你需求的方式，根据具体情况使用路由参数或查询参数。

动态路由

动态路由是指路由的一部分是动态的，它允许你在路径中使用占位符来匹配不同的值。在 Vue Router 中，你可以使用 :param 的形式来创建动态路由。

以下是一个简单的例子，演示如何使用动态路由：

定义动态路由：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import UserDetails from '../views/UserDetails.vue'

const routes = [
  { path: '/user/:id', component: UserDetails, name: 'userDetails' }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在这个例子中，:id 是一个动态的部分，它将匹配路径中的实际值。

在组件中获取动态参数：

// UserDetails.vue
export default {
  // 使用$route.params获取动态参数
  mounted() {
    const userId = this.$route.params.id
    console.log('User ID:', userId)
  }
}

在组件中，你可以通过 this.$route.params 来访问动态参数，这里的 id 就是在路由路径中定义的占位符。 导航到动态路由：

<!-- 在其他组件或模板中 -->
<router-link :to="{ name: 'userDetails', params: { id: 123 }}">User Details</router-link>

在导航到动态路由时，你可以使用 :to 属性的对象形式，指定 name 为动态路由的名称，同时提供相应的动态参数。

query和params传参的区别

在 Vue Router 中，query 和 params 是两种不同的方式来传递参数：

1. params（动态路由参数）：

   • 定义方式： 在路由的路径中定义动态部分，例如 /user/:id。

   • 传递方式： 使用 this.$route.params 在组件内部访问，或者在导航时通过 params 选项进行传递。

   • 例子：

     // 定义动态路由
     { path: '/user/:id', component: UserDetails }
     
     // 在组件中访问动态参数
     const userId = this.$route.params.id

2. query（查询参数）：

   • 定义方式： 在导航时通过 query 选项传递，例如 /user?id=123。

   • 传递方式： 使用 this.$route.query 在组件内部访问。

   • 例子：

     <!-- 在导航时传递查询参数 -->
     <router-link :to="{ path: '/user', query: { id: 123 }}">User Details</router-link>
     
     <!-- 在组件中访问查询参数 -->
     const userId = this.$route.query.id

区别：

• 可见性： params 的值是在路由路径中可见的，而 query 的值是在 URL 查询字符串中可见的。例如，/user/123 中的 123 是 params，而 /user?id=123 中的 id=123 是 query。
• 用途： params 通常用于标识资源的唯一标识符，而 query 则常用于过滤、排序或其他非唯一性的参数。
• 编码方式： params 的值会进行路径编码，而 query 的值会进行 URL 编码。

历史记录

replace

router.replace() 是 Vue Router 提供的导航方法之一，用于替换当前路由，而不会留下新的历史记录。

具体而言，router.replace() 类似于 router.push()，但不会在浏览器的历史记录中留下新的条目。这在某些情况下很有用，例如在执行登录操作后，你可能不希望用户点击后退按钮回到登录页。

以下是一个简单的示例，演示如何在 Vue 组件中使用 router.replace() 方法：

// 在某个组件中
<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const navigateToHome = ()=>{
  router.replace("/home")
}
</script>

<template>
  <button @click="navigateToHome">router</button>
</template>

前后移动

如果你想要在浏览器历史中进行横向导航，Vue Router 提供了 router.go() 方法，可以在浏览器历史中向前或向后导航。

使用 router.go(n)，其中 n 是一个整数，可以为正数（向前导航）或负数（向后导航）。这种方式并不会横跨历史，而是在当前的历史记录中进行导航。

下面是一个简单的例子，演示如何在 Vue 组件中使用 router.go() 进行横向导航：

<script setup>
import { useRouter, useRoute } from 'vue-router';

const navigateForward = () => {
  // 向前导航一个页面
  router.go(1);
};

const navigateBackward = () => {
  // 向后导航一个页面
  router.go(-1);
};

const router = useRouter();
const route = useRoute();
</script>

<template>
  <div>
    <h2>My Component</h2>
    <button @click="navigateForward">Navigate Forward</button>
    <button @click="navigateBackward">Navigate Backward</button>
  </div>
</template>

嵌套路由

嵌套路由是指在一个页面中嵌套另一个页面的路由结构。在Vue Router中，你可以通过配置嵌套的children来实现这一点。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/HomeComponent.vue';
import User from '../components/UserComponent.vue';
import UserHeader from '../components/UserHeader.vue';
import UserFooter from '../components/UserFooter.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/user',
      name: 'user',
      component: User,
      children: [
        {
          path: '',
          component: User,
        },
        {
          path: 'header',
          component: UserHeader,
        },
        {
          path: 'footer',
          component: UserFooter,
        },
      ],
    },
  ],
});

export default router;

嵌套的命名路由

当使用嵌套路由并希望对其进行命名时，你可以在路由配置中为每个路由定义一个name属性。这使得在编程式导航或其他地方引用这些路由变得更加方便。

以下是一个使用嵌套命名路由的简单例子：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

import App from '../views/App.vue'
import Nested from '../views/Nested.vue'
import Child from '../views/Child.vue'

const routes = [
  {
    path: '/',
    component: App,
    children: [
      {
        path: 'nested',
        component: Nested,
        children: [
          { path: 'child', component: Child, name: 'nested-child' }
        ]
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

命名视图

命名视图是Vue Router中的一个功能，允许你在同一组件中使用多个，每个都有一个独立的名称，用于渲染对应的组件。这对于构建复杂的布局或页面结构非常有用。

下面是一个简单的例子，演示如何在Vue Router中使用命名视图：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'

const routes = [
  {
    path: '/',
    components: {
      default: Home,
      sidebar: About,
      footer: Contact
    }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在这个例子中，components属性中的default、sidebar和footer分别对应了命名视图中的三个部分。在你的组件中，你可以通过相应的<router-view>名称来引用这些命名视图：

<!-- Home.vue -->
<template>
  <div>
    <router-view></router-view> <!-- 默认视图，渲染Home组件 -->
    <router-view name="sidebar"></router-view> <!-- 命名视图，渲染About组件 -->
    <router-view name="footer"></router-view> <!-- 命名视图，渲染Contact组件 -->
  </div>
</template>

重定向

在Vue Router中，重定向是一种常见的导航操作，它允许你将用户从一个路径自动导航到另一个路径。你可以通过路由配置中的redirect属性来实现重定向。

以下是一个简单的例子，演示如何在Vue Router中配置重定向：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // 重定向配置
  { path: '/redirect', redirect: '/about' }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在这个例子中，当用户访问/redirect路径时，他们将被自动重定向到/about路径。

未完待续