项目：04-Vue3集成Vue-Router实现路由跳转

一：定义路由

⭐在index.js文件中定义路由：

1.方式一：router-link

<router-link to="/test">通过router-link跳转到测试页面</router-link>

2.方法二：a

<a href="/test">通过a标签跳转到测试页面</a>

3.方法三：push(跳转后可以返回)

编程式的路由，要导入router对象

<el-button type="primary" @click="router.push('/test')">通过push跳转到新页面</el-button>

import router from '@/router';

4.方法四：replace(跳转后无法返回(替换路由))

<el-button type="primary" @click="router.replace('/test')">通过replace跳转到新页面</el-button>

import router from '@/router';

二：路由传参

query类型的参数

1.传递参数

<el-button type="primary" @click="router.push('/test?id=1')">路由传参id=1</el-button>

2.获取参数

多个参数用&连接
在test页面中定义id

id:router.currentRoute.value.query.id,

三：嵌套路由 RouterView

四：路由守卫

在路由配置文件中使用导航守卫，修改网页标题
⭐
to:跳转后route对象(跳转后的一些操作)
from:将要进行跳转的当前route对象(跳转前的一些操作)
next:调用该方法后，才能进入下一个钩子
meta:补充路由参数的对象
beforeEach：表示跳转之前的一些操作

五：404页面

1.定义404页面

2.定义404路由

{path: '/404', name: '404', meta:{title:'404找不到页面'},component:() => import('../views/404.vue')},

router.beforeEach((to,from,next) => {
   document.title = to.meta.title
   next()  // 必须调用这个函数才能实现跳转
})

3.路由输入错误时，统一跳转到404页面

{path: '/:pathMatch(.*)', redirect:'/404'}