vue3 安装 vue-router 支持
安装 vue-router
路由支持
在 vue3
中使用的是 [email protected]
版本 ^4.y.z
|
|
/src/router/index.ts
创建路由规则
安装之后, 在创建文件 /src/router/index.ts
作为 vue-router
的初始化文件。
|
|
main.ts
引用路由器
在 /src/router/index.ts
中, 路由器创建成功后, 需要在 vue3
中引用才能生效。
|
|
在 CompName.vue
使用路由规则
路由规则可以在任意 vue SCF
中使用, 例如 App.vue
作为 demo。
<router-link></router-link>
标签作为路由跳转规则, 编译后将是<a> </a>
标签- 在
router-link
中使用to="/path"
指定路由对象, 即在index.ts
中定义路由对象。
- 在
- 使用
<router-view />
作为占位符, 指定展示区。使用routes
中的 ex.HelloWorld.vue
将在该区域展示。
|
|
- 原文链接:https://typonotes.com/posts/2021/09/28/vue3-vue-router/
- 本文为原创文章,转载注明出处。
- 欢迎 扫码关注公众号
Go与云原生
或 订阅网站 https://typonotes.com/ 。 - 第一时间看后续精彩文章。觉得好的话,请猛击文章右下角「在看」,感谢支持。
