1. 安装依赖
npm install vue-router@next
npm install @types/vue-router
2. 创建router目录
在src router 目录下 创建 router.ts index.ts 这两文件
2.1 route.ts
# route.ts
import { RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'index',
component: () => import('@/views/home/index.vue'),
meta: {
title: '首页'
},
}
]
export default routes
2.2 index.ts
// 导入router所需的方法
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入路由页面的配置
import routes from './route'
// 路由参数配置
const router = createRouter({
// 使用hash(createWebHashHistory)模式,(createWebHistory是HTML5历史模式,支持SEO)
history: createWebHashHistory(),
routes: routes,
})
// 全局前置守卫,这里可以加入用户登录判断
// _ 这里的_代表当前变量暂时不使用 让ts校验通过
router.beforeEach((_to, _from, next) => {
// 继续前进 next()
// 返回 false 以取消导航
next()
})
// 全局后置钩子,这里可以加入改变页面标题等操作
router.afterEach((to, _from) => {
const _title = to.meta.title
if (_title) {
window.document.title = String(_title)
}
})
// 导出默认值
export default router
3. main.ts引入
4. 使用 路由出口
5. 路由编程式跳转页面
# 第一步在需要跳转的页面导入路由
import { useRouter } from 'vue-router';
# 实例化
const router = useRouter();
# 第一种跳转方式
router.push('/path');
# params 携带参数
router.push({ name: '/path', params: { userId: '123' }})
# query 携带参数
router.push({ path: 'register', query: { userId: '123' }})
# 第二种跳转方式
# 它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录
router.replace('/path')
# 第三种跳转方式
# 这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步。参数为 0 时会重新加载页面,但会有短暂白屏。
router.go(-2); // 回退两个页面
# 第四种跳转方式
# 在 history 记录中,返回上一页
router.back()
6. 接受路由传递的参数
# 首先在需要接受参数的页面引入
import { useRoute } from 'vue-router';
# 实例化
const route = useRoute();
# 接受参数
# query
let userId = route.query.userId;
# params
let userId = route.params.userId;