Vue3.0 + Ts 项目框架搭建二：路由 Router

前言

上篇文章我们使用 vue-cli 创建了模板项目，可以看到安装的依赖只有 vue，所以要正常的驱动项目，安装必要的依赖是跑不了。

其中Router是控制整个系统的页面路由，是最重要的依赖之一。因为我们使用Vue3.0的框架，所以这里必须使用Router4.0版本。

一、安装

通过npm安装：

npm install vue-router@4 -S

注：安装插件 -S 和 -D 区别
-S，- -save(保存) ，包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在，代表项目运行必备的插件。如vue、react等
-D，- -dev(生产)，包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器，代表打包需要用到的一些插件。如babel、webpack等

安装完成后的package.json文件

"dependencies": {"vue": "^3.0.0","vue-router": "^4.0.0-0"}

二、路由配置

创建路由

在src文件夹下，创建router文件夹，并在router文件下创建index.ts路由文件，如下：

在 index.ts 要配置页面路由：

全局引用

那么创建好了路由，怎么使用呢？我们需要在 main.ts 中引用它：

import { createApp } from 'vue'
import App from './App.vue'
// 1.引入路由
import router from './router/index'const app = createApp(App)// 2.装载路由
app.use(router)app.mount('#app')

这里我们在 main.ts 里面装载路由以后，就可以在后面的组件中使用 router来调用路由，而不需要每次都进行引入。

三、页面如何使用

注意⚠️：因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this.$router 或 this.$route。作为替代，我们使用 useRouter 函数。

首先：引入路由组件

import { useRouter } from 'vue-router'

其次：在setup()函数中定义

let router = useRouter()

最后：实现路由跳转

router.push({ path: '/' })

举例：

小结：Router@4.0的集成暂时告一段落，后面文章会集成Element-Plus作为项目的基础UI框架，敬请期待。

Vue3.0 + Ts 项目框架搭建二：路由 Router相关推荐

Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标
1. 在src文件下,创建components/SvgIcon/index.vue组件 <template><divv-if="isExternal":style ...
Vue3.0 + Ts 项目使用element-plus 自动按需导入使用v-loading报错
问题展示: 使用v-loading报错无法找到样式 element-plus/es/components/loading-directive/style/css 解决办法: element-plus ...
如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
vue3.0+ts+element-plus多页签应用模板：项目搭建
目录系列文章一.安装vue-cli@4.5.x 二.创建项目三.项目配置四.IDE配置五.vue.config.js配置六.重置浏览器默认样式系列文章 vue3.0+ts+element ...
vue3.0+ts+element-plus多页签应用模板：多级路由缓存
目录系列文章一.先说点啥 1. 为啥需要路由缓存? 2. 怎么实现路由缓存? 二.路由扁平化三.定义tag模块处理路由缓存四.切换路由时加入缓存五.使用keep-alive 系列文章 vue ...
SpringSecurity（二）、权限项目框架搭建
Springboot + SpringSecurity权限项目框架搭建目录一.项目介绍二.项目搭建(父子工程) 1.添加 pom 依赖 2.修改 yml 配置 3.编写JwtTokenUtil工 ...
vue3.0+ts+element-plus多页签应用模板：element-plus按需引入与动态换肤
目录系列链接一.安装element-plus 二.按需引入 1. 为什么要按需引入? 2. 如何按需引入? 3. 验证是否引入成功三.动态换肤 1. 制作自定义主题 2. 引入自定义主题 3. ...
vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（上）
目录系列文章一.先说点什么二.从问题开始,侧边栏是干啥的? 三.封装组件之思路分析四.封装菜单部分 1. MenuItem 2. ModuleMenu 系列文章 vue3.0+ts+eleme ...
(三) Angular2项目框架搭建心得
前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2 ...