router

router

依赖

直接看这这里 初始化

开始

创建路由器实例

一般在/src/router/下创建index.ts，即/src/router/index.ts

import { createRouter, createWebHistory } from "vue-router"//依赖
const router = createRouter({
    history:createWebHistory(),// 
    routes:[
        {
            path:'/home',
            name:'home',
            component : ()=> import('@/pages/home/index.vue')
        },
        {
            path:'/',
            redirect: '/home'
        }
    ]
})
export default router

注册路由器组件

const app = createApp(App)
app.use(router)

路由路径传参

const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

接收

{{ $route.params.id }}

匹配模式	匹配路径	route.params
/users/:username	/users/eduardo	{ username: 'eduardo' }
/users/:username/posts/:postId	/users/eduardo/posts/123	{ username: 'eduardo', postId: '123' }

import { useRouter } from 'vue-router'

const router = useRouter()

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

路由守卫

@/router/defend.ts 位置其实没固定，但我选择放这里，是路由的东西放这里容易管理 引入写@/router/index.ts路由文件defend(router)也行

import useUserStore from "@/store/user";
import pinia from "@/store";
const defend = (router: any) => {
  // 未登录可以访问的路由
  const whiteList = ["/book_login", "/"];
  // 导入仓库实例
  const userStore = useUserStore(pinia);

  router.beforeEach((to: any, from: any, next: any) => {
    // 判断to.name是为了防止循环login
    if (userStore.userToken != null && to.name !== "login") {
      next();
    } else {
      if (whiteList.includes(to.path)) {
        next();
      } else {
        next({ name: "login", query: { redirect: to.fullPath } });
      }
    }
    return false;
  });
};

export default defend;