vue3 router

小tips：vscode插件：json to ts ,使用：选中：ctrl+shift+alt+s
安装：

npm install vue-router -S

vue3使用router 4版本
vue2使用router 3版本

使用：
1、在src下面新建router
2.router里面新建index.ts
index,ts

import {createRouter,createWebHistory,RouteRecordRaw} from 'vue-router'
const routes:Array=[{
    path:'/',
    component:()=>import('../components/A.vue')
},{
    path:'/b',
    component:()=>import('../components/B.vue')
}]
const router = createRouter({
    history:createWebHistory(),
    routes
})
export default router

main.ts

import router from "./router";
app.use(router);

跳转
1.通过path跳转

      A
      B
   

2.通过name to需要使用:to,前提router里面需要有name

import {createRouter,createWebHistory,RouteRecordRaw} from 'vue-router'


const routes:Array=[{
    path:'/',
    name:'a',
    component:()=>import('../components/A.vue')
},{
    path:'/b',
    name:'b',
    component:()=>import('../components/B.vue')
}]
const router = createRouter({
    history:createWebHistory(),
    routes
})
export default router

      A
      B
   

3.使用js跳转

     A
     B
   

import {useRouter} from 'vue-router'
const router = useRouter()
const goA=(url:string)=>{
  router.push(url)
}
//或者
const goA=(url:string)=>{
  router.push({
    path:url
})
}

使用命名

     A
     B
   

import {useRouter} from 'vue-router'
const router = useRouter()
const goA=(name:string)=>{
  router.push({
    name:name
  })
}

使用 replace不留下历史记录
1.router-link 标签内使用

    A
      B
   

image.png

2.js方法内使用

 

     A
     B
   
   

import {useRouter} from 'vue-router'
const router = useRouter()
const goA=(name:string)=>{
  router.replace({
    name:name
  })
}

前进，后退：

import {useRouter} from 'vue-router'
const router = useRouter()
// 前进
const next=()=>{
  router.go(1)
}
// 后退
const prev=()=>{
  router.back()
}

传值。path与query搭配，name与params搭配(最新版已删除params，若想使用隐藏选择pinia或者vuex),query显示参数，params隐藏参数
query

动态

image.png

命名视图（用于tab切换）
路由

import {createRouter,createWebHistory,RouteRecordRaw} from 'vue-router'


const routes:Array=[{
    path:'/',
    name:'a',
    component:()=>import('../components/A.vue'),
    children:[{
        path:'/b',
        name:"b",
        component:()=> import('../components/B.vue')
    },{
        path:'/c',
        name:"c",
        components:{
            ccc:()=>import('../components/C.vue'),
            table:()=>import('../components/table.vue')
        }
    }]
}]
const router = createRouter({
    history:createWebHistory(),
    routes
})
export default router

a页面

app

路由重定向
如果想默认显示子路由某一个，两种方法
1.是子路由想要显示的path为空

image.png

2.重定向

image.png

image.png

image.png

alias可起多个名字，输入alias的路径等同于path

image.png

前置守卫
main.ts

const whiteName =['/']
router.beforeEach((to,from,next)=>{
  if(whiteName.includes(to.path) || localStorage.getItem('token')){
    next()
  }else{
    next('/')
  }
})

登录页表单验证

后置守卫与前置守卫结合做进度条
loading组件

main.ts

import { createApp, toRaw,createVNode,render } from "vue";
import Loading from './components/loading.vue'

const Vnode = createVNode(Loading)
render(Vnode,document.body)

const whiteName =['/']
router.beforeEach((to,from,next)=>{
  Vnode.component?.exposed?.startLoading()
  if(whiteName.includes(to.path) ||localStorage.getItem('token') ){
    next()
  }else{
    next('/')
  }
})
router.afterEach((to,from)=>{
  Vnode.component?.exposed?.endLoading()
})

meta，修改标题

image.png

router中

// 通过扩展RouteMeta来输入meta字段
declare module 'vue-router'{
    interface RouteMeta{
        title:string
    }
}

const routes:Array=[{
    path:'/',
    name:'c',
    component:()=>import('../components/C.vue'),
    meta:{
        title:'c页面'
    }
},{
    path:'/table',
    component:()=> import('../components/table.vue'),
    meta:{
        title:'table页面'
    }
}]

main.ts

image.png

通过meta加过渡效果
router

// 通过扩展RouteMeta来输入meta字段
declare module 'vue-router'{
    interface RouteMeta{
        title:string,
        transition:string
    }
}
const routes:Array=[{
    path:'/',
    name:'c',
    component:()=>import('../components/C.vue'),
    meta:{
        title:'c页面',
        transition:'animate__backInRight'
    }
},{
    path:'/table',
    component:()=> import('../components/table.vue'),
    meta:{
        title:'table页面',
        transition:"animate__backInUp"
    }
}]

app页面,使用Animate.css需要引入import 'animate.css'

滚动行为scrollBehavior
router,定位滚动位置

const router = createRouter({
    history:createWebHistory(),
    scrollBehavior:((to,from,savePosition)=>{//如果页面有滚动条则有值，否则为null
        if(savePosition){
            return savePosition
        }else{
            top:0
        }
    }),
    routes
})

指定位置

const router = createRouter({
    history:createWebHistory(),
    scrollBehavior:((to,from,savePosition)=>{
        return{
            top:30
        }
    }),
    routes
})

异步

const router = createRouter({
    history:createWebHistory(),
    scrollBehavior:((to,from,savePosition)=>{//如果页面有滚动条则有值，否则为null
        new Promise((value)=>{
            setTimeout(()=>{
                value({
                    top:30
                })
            },1000)
        })
    }),
    routes
})