vue3.0 router的安装以及使用

一城烟雨_

已于 2024-04-26 17:11:25 修改

阅读量399

点赞数 3

文章标签： vue.js javascript 前端

于 2024-04-25 18:27:47 首次发布

本文链接：https://blog.csdn.net/w1314_1314/article/details/138196395

版权

本文详细介绍了如何在Vue项目中安装和配置vue-router，包括创建router目录，编写route.ts和index.ts，实现各种路由跳转方式以及处理参数传递。涵盖了基本设置、全局守卫和参数接收等内容。

摘要由CSDN通过智能技术生成

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;