vue3笔记（21-1）vue-router4

这篇详细记录下用到过的路由方法，基于vue-router4

项目中使用

1. main.ts中引入
   安装router插件的时候注册了router-link和router-view这两个全局组件，项目中能直接使用。

   import router from './router'
   
   const app = createApp(App)
   app.use(router).mount('#app')

2. router/index.ts中写静态路由

   import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
   import SimpleLayout from '@/views/layout/simple.vue'
   import NotFound from '@/views/error/404.vue'
   
   export const constantRoutes: Array<RouteRecordRaw> = [
     {
       path: '/login',
       component: defineAsyncComponent(() => import('@/views/login/auth.vue')),
       meta: { hidden: true }
     },
     { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
     {
       path: '/',
       name: 'dash', // 路由命名
       component: SimpleLayout,
       redirect: '/dash', // 重定向，还可以写成命名路由、方法
       meta: { // 路由元信息
         title: 'dash',
         icon: 'userm',
         hidden: false,
         level: 1 // 用于在sidebar中渲染子菜单，可设置成level=2
       },
       children: [ // 可以有多个子菜单
         {
           path: '/dash',
           component: defineAsyncComponent(() => import('@/views/home/index.vue'))
         }
       ]
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL), // 手动启用历史记录模式
     routes: constantRoutes
   })
   
   export default router

（1）在写 redirect 的时候，可以省略 component 配置，因为它从来没有被直接访问过。唯一的例外是嵌套路由：如果一个路由记录有 children 和 redirect 属性，它也应该有 component 属性。

（2）createWebHistory创建 HTML5 模式，需要在nginx 中需要添加以下配置，作为一个简单的回退路由。如果 URL 不匹配任何静态资源，返回与 index.html 相同的页面。

location / {
  try_files $uri $uri/ /index.html;
}

（3）meta属性接收任意路由附加信息，并且它可以在路由地址和导航守卫上都被访问到。

3. layout/app-main.vue中引入
   router-link的页面切换只是更新了页面的部分内容，不会进行整个页面的刷新

   <template>
     <section class="app-main">
       <transition name="fade" type="transition" mode="out-in">
         <router-view />
       </transition>
     </section>
   </template>

跳转方式一：sibebar-item中使用

属性 to 与 router.push 接受的对象种类相同，两者的规则完全相同。

<router-link :to="...">
  <slot></slot>
</router-link>

<router-link :to="..." replace>

跳转方式二：组件中使用

编程式导航注意：

1. params 不能与 path 一起使用
2. router.push 和所有其他导航方法都会返回一个 Promise
3. replace 在导航时不会向 history 添加新记录
4. 直接 watch 期望改变的参数，避免监听整个 route 对象
5. 若路由导航相同，相同的组件实例将被重复使用（组件的生命周期钩子不会被调用）

   import { useRouter, useRoute } from 'vue-router'
   const router = useRouter()
   const route = useRoute()
   
   router.push('/users')
   router.push({ path: '/home', replace: true }) 
   // 相当于router.replace({ path: '/home' })
   
   // 带有路径的对象
   router.push({ path: '/users' })
   
   // 命名的路由，并加上参数，让路由建立 url
   router.push({ name: 'user', params: { username: 'ginny' } })
   
   // 带查询参数，结果是 /aaa?b=1&c=1
   router.push({ path: '/aaa', query: { ...route.query, ...query } })
   
   // 带 hash，结果是 /about#team
   router.push({ path: '/about', hash: '#team' })
   router.go(-1)  // 返回、后退一步
   watch( // 当参数更改时获取用户信息
     () => route.params.id,
     async newId => {
       userData.value = await fetchUser(newId)
     }
   )

守卫导航

1. 触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。
2. 若返回 false ，取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
3. 若返回一个路由地址，跳转。

获取参数的js原生方法

const params = new URLSearchParams(window.location.search)
const aaa = params.get('aaa') // http://***/?aaa=1

附录
Vue Router | Vue.js 的官方路由
Vue Router 4 的使用