vue路由基础入门

介绍

Vue Router 是官方推荐的路由管理器，它与 Vue.js 深度集成，允许我们创建复杂的单页应用（SPA）。想象一下，如果你正在驾驶一辆车，而 Vue Router 就像是交通警察，指挥着车辆如何在不同的道路上行驶——这里的“道路”就是我们所说的“路由”。通过 Vue Router，我们可以轻松地在不同视图之间导航，同时保持用户体验的流畅性，无需刷新整个页面。

安装与配置

• 要使用 Vue Router，首先需要安装它。你可以通过 npm 或 yarn 来安装：

npm install vue-router

• 接下来，在你的项目的src目录下创建路由专用的目录router，然后创建路由的配置文件index/js，代码类似下面所示

// 路由配置

import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

const router = createRouter({
	history:createWebHistory(),
	routes:[
		{
			path:'/home',
			component:Home
		},
		{
			path:'/about',
			component:About
		}
	]
})
export default router

这段代码做了几件事：它创建了一个路由器实例，并定义了一些简单的路由规则。

• main.js代码如下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router' // router 是一个配置好的路由对象

const app = createApp(App) // vue 根组件 
//app 对象 use 方法
console.log(app)
console.log(router)
// vue的周边生态就起来了
app.use(router)//   插件路由 ->需要在挂载之前注册路由
.mount('#app') //->挂载点
 

路由链接与导航

Vue Router 提供了 <router-link> 组件来代替传统的 <a> 标签，用于构建内部链接。<router-link> 不仅提供了与 <a> 相同的功能，还支持更高级的特性，比如动态参数、编程式导航等。例如：

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
  import {RouterLink,RouterView} from 'vue-router'  
</script>

• 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
• 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

动态路由匹配与嵌套路由

动态路由允许你在 URL 中包含可变部分，这非常适用于展示用户资料或文章详情之类的场景。例如：

{
  path: '/user/:id',
  component: User,
  children: [
    {
      path: 'profile',
      component: UserProfile,
    },
    {
      path: 'posts',
      component: UserPosts,
    },
  ]
}

在这个例子中，:id 是一个动态段，它可以匹配任何值；而子路径则实现了嵌套路由，即在用户页面内进一步细分。

路由传参

query参数

传递参数

```
 <!-- 跳转并携带query参数（to的字符串写法） -->
 <router-link to="/news/detail?a=1&b=2&content=欢迎你">
     跳转
 </router-link>
                 
 <!-- 跳转并携带query参数（to的对象写法） -->
 <RouterLink 
   :to="{
     //name:'xiang', //用name也可以跳转
     path:'/news/detail',
     query:{
       id:news.id,
       title:news.title,
       content:news.content
     }
   }"
 >
   {{news.title}}
 </RouterLink>
```

接收参数：

```
 import {useRoute} from 'vue-router'
 const route = useRoute()
 // 打印query参数
 console.log(route.query)
```

params参数

传递参数

```
 <!-- 跳转并携带params参数（to的字符串写法） -->
 <RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
                 
 <!-- 跳转并携带params参数（to的对象写法） -->
 <RouterLink 
   :to="{
     name:'xiang', //用name跳转
     params:{
       id:news.id,
       title:news.title,
       content:news.title
     }
   }"
 >
   {{news.title}}
 </RouterLink>
```

接收参数：

```
 import {useRoute} from 'vue-router'
 const route = useRoute()
 // 打印params参数
 console.log(route.params)
```

导航守卫

Vue Router 提供了多种级别的导航守卫来拦截导航过程，允许你在进入或离开页面前添加逻辑，如权限验证、数据预取等。常见的导航守卫包括全局守卫、路由独享守卫以及组件内守卫。

总结

Vue Router 在 Vue 3 中是一个非常强大的工具，它简化了 SPA 的开发流程，同时提供了丰富的功能以满足各种需求。无论是简单的博客站点还是复杂的商业应用，Vue Router 都能帮助你有效地管理应用的状态和用户体验。