Vue3路由基本使用（学习笔记）

---

前言

vue3路由的基本使用。

一、路由文件的创建

• Vue3中要使用vue-router的最新版本，目前是4版本。

• 路由配置文件代码如下

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.ts中进行全局注册

代码如下（示例）：

import router from './router/index'
app.use(router)
app.mount('#app')

---

三、 路由入口RouterView的注册

注册好路由后必须要在app.vue根组件中进行视图组件的引入，要不显示不出来，路由不起效果。
代码如下（示例）：

<template>
  <div class="app">
    <!-- 导航区 -->
    <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>

---

四、 命名路由和嵌套路由

4.1 命名路由

作用：可以简化路由跳转及传参
给路由规则命名：

routes:[
  {
    name:'home',
    path:'/home',
    component:Home
  },
  {
    name:'news',
    path:'/news',
    component:News,
  },
  {
    name:'about',
    path:'/about',
    component:About
  }
]

<!--简化前：需要写完整的路径（to的字符串写法） -->
<router-link to="/news">跳转</router-link>

<!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
<router-link :to="{name:'about'}">跳转</router-link>

4.2 嵌套路由

配置路由规则，使用children配置项：

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

注意点：
1.跳转路由（记得要加完整路径）：

<router-link to="/news/detail">xxxx</router-link>
<!-- 或 -->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>

2.二级路由创建完成后，要在你想要显示二级路由页面的地方放RouterView入口组件，一般是在Home首页中放

---

五、路由传参

5.1 query传参

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

组件中接收参数

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

---

5.1 params传参

<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/参数标题/参数地址3`">{{news.title}}</RouterLink>
				
<!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink 
  :to="{
    name:'deatil', //用name跳转
    params:{
      id:news.id,
      title:news.title,
      address:news.address
    }
  }"
>
  {{news.title}}
</RouterLink>

组件中接收参数

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

---

六、编程式导航

主要用来点击事件来跳转路由的，不用来跳转页面

import {useRoute,useRouter} from 'vue-router'

const route = useRoute()
const router = useRouter()

const Fn = () => {
	router.push('/home')  // 跳转页面
	console.log(route.query) // 获取query参数
	console.log(route.parmas) // 获取params参数
}

七、路由重定向

作用：将特定的路径，重新定向到已有路由。
简言之：就是一访问某个路径就自动跳转指定的路由

{
    path:'/',
    redirect:'/about'
}

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了Vue3中路由的使用。