vue3路由特性

1.创建实例变化的方式

history代替了mode选项

history:createWebHistory(),
hash:createWebHashHistory(),
abstract:createMemoryHistory(),

都移至createWebHistory等方法中

2.移除了通配符 *

routes:[
	{
	path:'*',
	}
]


//代替方式

//pathMatch名称自定义
//(.*)正则表达式表示 所有
//最后一个*是必填项而且是重复的
routes:[
	{
	path:'/:pathMatch(.*)*',//当前目录下的所有涵盖为匹配的
	name:'not-found',
	component:NotFound,//组件
	}
];
//当匹配到的路径不一致的时候,进行跳转
router.resolve({
name:'not-found',//名称要与routes内名称一致
params:{
	pathMatch:['not','found']
},//参数

}).href

3.在这里插入图片描述
4.在这里插入图片描述
5.在这里插入图片描述
to=""更加关注了,指定自定义的内容写在v-slot内

在这里插入图片描述

### Vue3 跆由功能及相关问题 Vue Router 是 Vue.js 的官方路由管理器,它允许开发者通过定义路径和组件之间的映射来实现单页面应用 (SPA) 中的导航。在 Vue 3 中,Vue Router 提供了许多增强的功能和支持 TypeScript 的能力。 #### Vue3 路由的核心概念 Vue Router 对象可以通过 `this.$router` 访问,在任何安装了 Vue Router 的根 Vue 组件中都可以使用[^1]。这意味着可以在任意子组件中调用 `$router.push()` 或其他方法来进行导航操作。 以下是创建一个基本 Vue3 路由配置的例子: ```javascript import { createRouter, createWebHistory } from &#39;vue-router&#39;; import HomeView from &#39;./views/HomeView.vue&#39;; import AboutView from &#39;./views/AboutView.vue&#39;; const routes = [ { path: &#39;/&#39;, name: &#39;home&#39;, component: HomeView, }, { path: &#39;/about&#39;, name: &#39;about&#39;, component: AboutView, } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 上述代码展示了如何设置 `/` 和 `/about` 这两个基础路由,并分别指向对应的视图组件[^2]。 #### 使用 TypeScript 配置 Vue3 路由 对于现代项目开发环境,比如基于 Vue3、TypeScript 和 Vite 构建的应用程序,可以进一步利用强类型支持提升开发体验[^3]。下面是一个带有 TypeScript 类型声明的简单例子: ```typescript // main.ts import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import router from &#39;./router&#39;; createApp(App).use(router).mount(&#39;#app&#39;); // router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from &#39;vue-router&#39;; import HomeView from &#39;../views/HomeView.vue&#39;; import AboutView from &#39;../views/AboutView.vue&#39;; const routes: Array<RouteRecordRaw> = [ { path: &#39;/&#39;, name: &#39;Home&#39;, component: HomeView, }, { path: &#39;/about&#39;, name: &#39;About&#39;, component: AboutView, }, ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); export default router; ``` 此示例不仅包含了标准的 JavaScript 实现方式,还加入了 TypeScript 的类型安全特性,从而减少了运行时错误的可能性。 #### 常见问题及其解决方案 1. **动态路由匹配**: 如果需要处理参数化的 URL,则可采用如下形式定义路由规则 `{path:&#39;/user/:id&#39;,component:UserDetail}` 并在目标组件内部访问该参数 via `this.$route.params.id`. 2. **嵌套路由**: 当存在多级结构的需求时,可通过 children 属性指定子路由集合。 3. **重定向与别名**: 可以为某些特定条件下的请求设定默认跳转地址或者提供同义词链接选项。 以上提到的内容均适用于 Vue3 版本中的新 API 设计模式下完成相应功能扩展.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值