企业电子网站的建设案例分析,做微博推广的网站,线框图网站,微网站 源码 免费Router 的作用是在单页应用#xff08;SPA#xff09;中将浏览器的URL和用户看到的内容绑定起来。当用户在浏览不同页面时#xff0c;URL会随之更新#xff0c;但页面不需要从服务器重新加载。
1 Router 基础 RouterView RouterView 用于渲染当前URL路径对应的路由组件。… Router 的作用是在单页应用SPA中将浏览器的URL和用户看到的内容绑定起来。当用户在浏览不同页面时URL会随之更新但页面不需要从服务器重新加载。
1 Router 基础 RouterView RouterView 用于渲染当前URL路径对应的路由组件。可以放在任何地方。 RouterLink 使得Router能在不重新加载页面的情况下改变URL处理URL的生成、编码。可以使用router.push()函数来代替。
表 Router的基础组件
Router的使用步骤
通过调用createRouter() 函数创建Router实例。参数为一个包含路由数组、history等信息的配置项。将路由器实例注册为插件通过调用app.use()来完成。
Router插件的职责包括
全局注册RouterView 和 RouterLink组件。添加全局$router和$route属性。启用useRouter()和useRoute()组合式函数。触发路由器解析初始路由。
!-- App.vue --
template
h1Hello App!/h1
router-view /
/template!-- router/index.ts --
import HomePage from /views/HomePage.vue;
import {createRouter, createWebHashHistory} from vue-router;const routes [{ path: /, component: HomePage }
]const router createRouter({history: createWebHashHistory(),routes,
})
export default router!-- main.ts --
import { createApp } from vue
import App from ./App.vue
import router from /router;const app createApp(App)
app.use(router)
app.mount(#app)1.1 动态路由匹配
1.在配置路由列表时可以配置路径参数“:参数名”的形式。这些参数及值会映射到$route.params 上的相应字段。 匹配模式 匹配路径 rout.params /user/:username /user/hmf { username: ‘hmf’ } /user/:username/other/:info /user/hmf/other/hello { username: ‘hmf’, other: ‘hello’ } 2.可以监听路由参数。
wathc(() route.params,(newVal){// 省略代码其中route userRoute()
}) 3.在参数中自定义正则表达式。 a)在参数后面的括号里定义该参数匹配的正则表达式。 匹配路径 /user/:id(\\d) /user/:id /user/hello 不匹配 匹配 /user/124 匹配 匹配但优先级低于有正则表达式的参数。 b) 可重复的参数。如果路径参数值是一个数组可以用*及这两个符号将参数标记为可重复
例如/user/:ids(\\d)*匹配路径/user/123/33/23route.params 的值为{ids: [123,33,23]}
1.1.1 sensitive 和 strict路由配置
默认情况下所有路由是不区分大小写的并且能匹配带有或不带有尾部斜线的路由例如匹配模式为/about非严格模式下它可以匹配/about/这个路径。
可以在创建路由器实例时配置sensitive 和 stric。
1.2 路由配置
一些应用程序的UI由多层嵌套的组件组成。在这种情况下URL的片段通常对应于特定的嵌套组件结构。
实现方式在组件中包含自己嵌套的router-view。例如在User组件的模版内添加一个router-view。
!-- User.vue --
templatediv classuserh2User {{ $route.params.id }}/h2router-view //div
/template
对应的路由配置为
const routes [{path: /user/:id,component: User,children: [{path: profile,component: UserProfile,},{path: posts,component: UserPosts,},],},
] 图 嵌套组件及对应匹配的路径
路由配置时可以给子路由命名须唯一值,例如
{path: /usr, name: user, component: UserHome},在路径导航时不仅可以通过URL来匹配组件还可以通过子路由命名。
route.push(‘/usr’) 等效于 route.push({name: ‘user’})
1.2.1 重定向和别名
{ path: /home, redirect: / } 从/home 重定向到 /
{ path: /home, redirect: { name: homepage }从/home 重定向到名为“homepage”的路由。
别名意味着URL不会改变但是会匹配到特定路径。
{ path: /, component: Homepage, alias: /home }当路径为/及/home时都能访问到Homepage这个组件且URL不变。
1.2.2 路由组件传参
在组件中使用$route 或useRoute()来获取路径参数这将使得与路由耦合度更紧密限制了组件的灵活性因为它只能用于特定的URL。
可以通过props配置来解除这种行为。在配置路由时props属性设置为true。
{ path: /user/:id, component: User, props: true }!-- User.vue --
script setup
defineProps({id: String
})
/scripttemplatedivUser {{ id }}/div
/template
还可以创建一个返回props的函数将参数转换为其他类型。
{path: /search,component: SearchUser,props: route ({ query: route.query.q })}
1.2.3 命名视图
当需要在同级展示多个视图时可使用命名视图。
!-- App.vue --templaterouter-view classview left-sidebar nameLeftSidebar /router-view classview main-content /router-view classview right-sidebar nameRightSidebar /
/templateconst router createRouter({history: createWebHashHistory(),routes: [{path: /,components: {default: Home,LeftSidebar,RightSidebar,},},],
}) 图 命名视图
1.2.4 历史记录模式 Hash模式 createWebHashHistory()它在内部传递的实际URL之前使用了一个哈希字符(#)这使得#后面的URL不会被发送到服务器所以它不需要在服务器层面上进行任何特殊处理即可正常访问但它在SEO中有不好的影响。 例如 http://localhost:8080/#/usr Memory模式 createMemoryHistory()不会假定自己处于浏览器环境因此不会与URL交互也不会自动触发初始导航,不会有历史记录。 HTML5模式 createWebHistory()需要在服务器上做配置。 例如 http://localhost:8080/usr如果没适当配置会得到一个404错误。
表 Vue Router的三种历史模式
