Vue3中路由的引入和基本使用

安装并引入路由

安装

npm install vue-router@4
或者
yarn add vue-router@4

引入

1. 创建router文件夹，并在其中创建 router.ts和router.config.ts
   
2. 配置router.ts文件

const routers = [
  {
    path:'/',
    redirect:'/home',
  },
  {
    path: '/home',
    //采用路由懒加载的形式引入
    component:() => import('@/pages/Home/index.vue')
  }
]
export default routers

3. 配置router.config.ts

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './router'


const router = createRouter({
// 这里使用hash模式路由
  history: createWebHashHistory(),
  // @ts-ignore
  routes,
})
// 导出router
export default router

4. 在main.ts里引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router/router.config";
const app = createApp(App)
app.use(router)

//建议app.mount放到最后面
app.mount('#app')

在组件中使用路由

这里采用setup语法糖的形式使用

使用route获取路由信息

在 Vue 3 不能和Vue2一样使用 this.$router ，也必须通过导入路由 API 来使用

import { useRoute } from 'vue-router'

再在 setup 里定义一个变量来获取当前路由

const route = useRoute()

接下来就可以通过定义好的变量 route 去获取当前路由信息了

// 获取路由名称
console.log(route.name)

// 获取路由参数
console.log(route.params.id)
// 获取路由元信息
console.log(route.meta.xxx)

使用router操作路由

在 Vue 3 不能和Vue2一样使用 this.$router ，也必须通过导入路由 API 来使用

import { useRouter } from 'vue-router'

useRouter 也是一个函数，需要在 setup 里定义一个变量来获取路由信息。

const router = useRouter()

此时就可以通过router操作路由进行页面的跳转等操作
例如：

// 跳转首页
router.push({
  name: 'home',
})
// 返回上一页
router.back()

例如通过点击事件进行跳转

<template>
  <div
    class="link"
    @click="
      router.push({
        name: 'home',
      })
    "
  >
    <span>首页</span>
  </div>
</template>

使用 router-link 标签跳转

router-link 是一个全局组件，可直接在 <template /> 里直接使用，无需导入，基础的用法在 Vue 2 和 Vue 3 里是一样。默认会被转换为一个 a 标签，对比写死的 <a href="..."> ，使用 router-link 会更加灵活

<template>
  <router-link to="/home">首页</router-link>
</template>

router-link标签必须要加 to='指定路径’才可使用

使用router.push的方法可以实现跳转，使用router-link标签也可以实现跳转，两种方法可灵活使用
如果在很多个循环中加入router-link 则可能会造成卡顿， 因为 router-link是一个组件 ， 此时建议使用编程式路由搭配事件委托进行跳转

添加active类可以使用active-class属性

<template>
  <router-link to="/home" active-class='active'>首页</router-link>
</template>

路由传参

通过<router - link>标签

在router-link 里面使用时， 就在路径后面加上?， ？后面的东西即为传递的参数,
也可以写成对象的形式 进行传参 别忘了to的前面的冒号

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

编程式传递参数

通过router.push跳转 传递参数

function goSearch(){
  // 路由间的跳转和传参
  router.push({
    name:'Search',  // 也可以写成路径
    query:{
      keyWords:keyWords.value,
    }
  })
}

要注意的是若携带params参数跳转则只能使用name

params参数

首先要在路由配置中进行占位

    path:'/home',
    component:Home,
    children:[
        {
            component:Message,
            children:[
                {
                    name:'xiangqing',
                    path:'detail/:id/:title?', //使用占位符声明接收params参数
                    // :id :title表示接受名为id和title的parmas参数
                  //title 后面的？表示可传可不穿
                    component:Detail
                }
            ]
        }
    ]

如果是必传的参数则每次跳转都必须加上传递的参数, 如果后面又有用到query参数， 建议将params参数变成可选参数， 这样传递query参数时无需传递params参数

路由的props配置

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

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

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
    // route 是使用props的组件里面的route ，可以把上一个组件所有传给这个组件的parmas和query值收集到，
     //  通过props接受即可 
	props(route){
		return {
			id:route.query.id,
			title:route.query.title