import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
/* 关于vue-router知识点:
createRouter:
创建一个可以被 Vue 应用程序使用的路由实例。
查看 RouterOptions 中的所有可以传递的属性列表。
createWebHashHistory:
创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://),
或当配置服务器不能处理任意 URL 时这非常有用。注意:如果 SEO 对你很重要,
你应该使用 createWebHistory。
example:
// at https://example.com/folder
createWebHashHistory() // 给出的网址为 `https://example.com/folder#`
createWebHashHistory('/folder/') // 给出的网址为 `https://example.com/folder/#`
// 如果在 base 中提供了 `#`,则它不会被 `createWebHashHistory` 添加
createWebHashHistory('/folder/#/app/') // 给出的网址为 `https://example.com/folder/#/app/`
// 你应该避免这样做,因为它会更改原始 url 并打断正在复制的 url
createWebHashHistory('/other-folder/') // 给出的网址为 `https://example.com/other-folder/#`
// at file:///usr/etc/folder/index.html
// 对于没有 `host` 的位置,base被忽略
createWebHashHistory('/iAmIgnored') // 给出的网址为 `file:///usr/etc/folder/index.html#`
createWebHistory() // 没有 base,应用托管在域名 `https://example.com` 的根目录下。
createWebHistory('/folder/') // 给出的网址为 `https://example.com/folder/`
RouteRecordRaw:
当用户通过 routes option 或者 router.addRoute() 来添加路由时,可以得到路由记录。 有三种不同的路由记录:
一、单一视图记录:有一个 component 配置
二、多视图记录 (命名视图) :有一个 components 配置
三、重定向记录:没有 component 或 components 配置,因为重定向记录永远不会到达。
path#
类型:string
详细内容:
记录的路径。应该以 / 开头,除非该记录是另一条记录的子记录。可以定义参数:/users/:id 匹配 /users/1
以及 /users/posva。
redirect#
类型:RouteLocationRaw | (to: RouteLocationNormalized) => RouteLocationRaw (可选)
详细内容:
如果路由是直接
关于vue-router中动态路由与路由守卫详情
最新推荐文章于 2024-07-03 09:00:00 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)