美文网首页
vue3 路由封装

vue3 路由封装

作者: 小李不小 | 来源:发表于2021-06-17 09:59 被阅读0次
    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>
    

    相关文章

      网友评论

          本文标题:vue3 路由封装

          本文链接:https://www.haomeiwen.com/subject/tbuzeltx.html