Vue3基础之vue-router

1. 安装 vue-router当前版本^4.2.2

npm install vue-router -D

2. 建立文件夹router

• 项目路由目录结构

  
  1685930561330.png

• routes.js 是vue-router的路由

import StudyDemo from '../components/StudyDemo.vue'  

const routes = [
    { path: '/', component: StudyDemo },
    {path: '/home', component: StudyDemo}, 
  ] 
  
export default routes

• index.js 是vue-router的实例

import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes'

const router = createRouter({  
    history:createWebHistory (),   
    routes 
})

export default router  

3. man.js 注册路由

import { createApp } from 'vue' 
import App from './App.vue'

import router from './router' 
const app = createApp(App);

app.use(router).mount('#app');   

4. vue-router 基本使用

1. 引用

    import {useRoute,useRouter} from 'vue-router'

2. 说明

• useRoute 等于vue2的 thie.$route
• useRouter 等于vue2的 thie.$router

vue3 之后没有params传参，若需要params则增加 :zyj {path: '/home1/:zyj',name:'home1', component: StudyDemo1} useRoute ().params.zyj 获取数据

3. 使用

• 跳转页面

<script setup> 
    import {useRoute,useRouter} from 'vue-router'
    let router = useRouter()
    let route = useRoute()
    const jump1=()=>{
        router.push({path:'home1',query:{zyj:'12356'}})
    }
</script>

• 获取传参

<script setup> 
    import {useRoute,useRouter} from 'vue-router'
    let router = useRouter()
    let route = useRoute()
    const zyjData = route.query.zyj
</script>

5. vue-router 导航守卫

• beforeEach函数 to:路由目的，from:路由来源，next: 继续函数

import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes'

const router = createRouter({  
    history:createWebHistory (),   
    routes 
})
router.beforeEach((to,from,next)=>{
     console.log(to,from,next);
     next()
})
export default router