vue3 路由封装

1.安装vue-router 最新 支持vue3 router的版本

新建router/index.js文件

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

const routes = [
  {
    path: '/',
    component: () => import('../views/Dome.vue'),
    meta: {
      title: 'Dome1'
    }
  },
  {
    path: '/dome2',
    component: () => import('../views/Dome2.vue'),
    meta: {
      title: 'Dome2'
    }
  }
  }
]

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: () => ({ y: 0 }),
  routes: routes
})


  //路由守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('stor')
  // const role = localStorage.getItem('ms_username');
  // NProgress.start(); //进度条
  if (to.path !== '/login' && !token) {
    console.log('1')
    next('/login');
  } else {
    console.log('2')
    if (to.name === 'Login' && token) {
      router.push('/')
    } else {
      next();
    }
  }
});


export default router

3. main.js 文件引入

import { createApp } from 'vue'
import router from './router/index' //引入
import App from './App.vue'
const app = createApp(App)

app.use(router)

app.mount('#app')

在2.x中使用new Vue创建实例，3版本用createApp 创建实例，2.x中的vue.use使用插件现在使用app.use

4.页面跳转

1，可以继续使用 router-link
2，事件跳转

引入 import { useRouter } from 'vue-router'
    const router = useRouter()
     function goback() { //跳转方法
     //  router.push('/')   //无参数跳转
      router.push({  //有参数
        path:'/',
        query:{
          inType:1
        }
      })
    }

3,参数接收

import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query)

5.完整案例如下：

Dome.vue

<template>
  <div>
    <div>dome</div>
    <div>{{count}}</div>
    <button @click="changCount">改变count</button>
    <router-link to='/dome2' tag="span">dome02</router-link>
  </div>
</template>

<script>
import { ref , onMounted } from 'vue'
import {useRoute} from 'vue-router'
export default {
  setup(){
    let count = ref(0)
    const changCount =()=>{
      // console.log(count.value)
      count.value++;
    }
    onMounted(()=>{
      //接收参数
      const route = useRoute()
      console.log(route.query)
    })
    //注意点：在组合API中定义的变量/方法，要想在外界使用，必须要通过return {xxx,xxx} 暴露出去
    return {
      count,
      changCount
    }
  }
}
</script>

Dome2.vue

<template>
  <div>
    <button @click="goback">回首页</button>
    <button @click="gobackParams">回首页带参数</button>
  </div>
</template>

<script>
import {useRouter} from 'vue-router'
export default {
  setup(){ 
    const router = useRouter()
    function goback() {
      router.push('/')
    }
    const gobackParams =()=>{
      router.push({
        path:'/',
        query:{
          inType:1
        }
      })
    }
    return{
      goback,
      gobackParams
    }
  }
}
</script>

<style>

</style>