个人随笔
目录
Vue3技术学习:路由的使用
2024-10-29 22:21:55

1、路由的安装

官方文档
https://router.vuejs.org/zh/

  1. npm install vue-router@4

若是没有安装,启动项目后会报找不到router

2、例子

这里举个简单的例子,项目目录下面有两个vue页面,一个HomeView.vue一个AboutView.vue,然后首页点击切换,怎么做呢?

项目结构如下

2-1、首先建两个页面

AboutView.vue,

  1. <script setup>
  2. import { ref } from 'vue'
  3. </script>
  4. <template>
  5. <div>About...</div>
  6. </template>

和HomeView.vue

  1. <script setup>
  2. import { ref } from 'vue'
  3. </script>
  4. <template>
  5. <div>HOME...</div>
  6. </template>

2-1、首先引入路由

这里分装成一个router.js文件

  1. import { createMemoryHistory, createRouter,createWebHashHistory,createWebHistory } from 'vue-router'
  2. import HomeView from './components/HomeView.vue'
  3. import AboutView from './components/AboutView.vue'
  4. const routes = [
  5. { path: '/', component: HomeView },
  6. { path: '/about', component: AboutView },
  7. ]
  8. const router = createRouter({
  9. //history: createMemoryHistory(),
  10. //history:createWebHashHistory(),//会带有#
  11. history:createWebHistory(),//HTML5 模式 推荐
  12. routes,
  13. })
  14. export default router

2-2、main.js使用路由组件

  1. import { createApp } from 'vue'
  2. import router from'./router.js'
  3. import App from './App.vue'
  4. createApp(App).use(router).mount('#app')

2-3、App.vue

  1. <script setup>
  2. </script>
  3. <template>
  4. <h1>Hello App!</h1>
  5. https://cn.vuejs.org/guide/scaling-up/routing.html
  6. <p>
  7. <strong>Current route path:</strong> {{ $route.fullPath }}
  8. </p>
  9. <nav>
  10. <RouterLink to="/">Go to Home</RouterLink><br/>
  11. <RouterLink to="/about">Go to About</RouterLink>
  12. </nav>
  13. <main>
  14. <RouterView />
  15. </main>
  16. </template>

启动就好了。

其实上面的流程,在官网也很清晰:https://router.vuejs.org/zh/guide/

3、不同的历史模式

我们上面会有这个配置

  1. const router = createRouter({
  2. //history: createMemoryHistory(),
  3. //history:createWebHashHistory(),//会带有#
  4. history:createWebHistory(),//HTML5 模式 推荐
  5. routes,
  6. })

3-1、Hash 模式

hash 模式是用 createWebHashHistory() 创建的:

  1. import { createRouter, createWebHashHistory } from 'vue-router'
  2. const router = createRouter({
  3. history: createWebHashHistory(),
  4. routes: [
  5. //...
  6. ],
  7. })

它在内部传递的实际 URL 之前使用了一个哈希字符(#)。由于这部分 URL 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理。不过,它在 SEO 中确实有不好的影响。如果你担心这个问题,可以使用 HTML5 模式。

3-2、Memory 模式

Memory 模式不会假定自己处于浏览器环境,因此不会与 URL 交互也不会自动触发初始导航。这使得它非常适合 Node 环境和 SSR。它是用 createMemoryHistory() 创建的,并且需要你在调用 app.use(router) 之后手动 push 到初始导航。

  1. import { createRouter, createMemoryHistory } from 'vue-router'
  2. const router = createRouter({
  3. history: createMemoryHistory(),
  4. routes: [
  5. //...
  6. ],
  7. })

虽然不推荐,你仍可以在浏览器应用程序中使用此模式,但请注意它不会有历史记录,这意味着你无法后退或前进。

3-3、HTML5 模式

用 createWebHistory() 创建 HTML5 模式,推荐使用这个模式:

  1. import { createRouter, createWebHistory } from 'vue-router'
  2. const router = createRouter({
  3. history: createWebHistory(),
  4. routes: [
  5. //...
  6. ],
  7. })

当使用这种历史模式时,URL 会看起来很 “正常”,例如 https://example.com/user/id。漂亮!

不过,问题来了。由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://example.com/user/id,就会得到一个 404 错误。这就尴尬了。

不用担心:要解决这个问题,你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源,它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!

注:如果部署的时候没有独立域名,用路径分发的话,nginx配置不同的模式会稍有不同,可以参考

https://www.suibibk.com/topic/1300248160588791808

4、导航守卫

正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。

比如

  1. router.beforeEach((to, from) => {
  2. console.log("from=",from)
  3. console.log("to=",to)
  4. if(to.path=="/about"){
  5. console.log("不准去")
  6. return false;
  7. }
  8. })

这样用户点击/about就会点不进去,当然更高级的用户是用来检测登录,假设去该路径需要登录,则检测登录,具体怎么做呢,我们首先定义routes就加上元数据,比如下面的/about是需要登录的。

  1. const routes = [
  2. { path: '/', component: HomeView },
  3. { path: '/about', component: AboutView , meta: { requiresAuth: true },},
  4. { path: '/login', component: LoginView },
  5. ]

再加个简单的路由守卫

  1. router.beforeEach(async (to, from) => {
  2. //canUserAccess() 返回 `true` 或 `false`
  3. const canAccess = await canUserAccess(to)
  4. if (!canAccess) return '/login'
  5. })
  6. function canUserAccess(to){
  7. console.log(to.meta.requiresAuth)
  8. if(to.meta.requiresAuth){
  9. console.log("需要登录")
  10. return new Promise((resolve) => {
  11. setTimeout(() => {
  12. resolve(false);
  13. }, 2000);
  14. });
  15. }
  16. return true;
  17. }

canUserAccess方法模拟后台登录校验接口。当然用不用async和await要根据你的应用场景来。

更多导航守卫什么的教程可以参考官网:https://router.vuejs.org/zh/

 12

啊!这个可能是世界上最丑的留言输入框功能~


当然,也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号-2