vue3 路由封装
开开 2022-08-04 16:11:41 2022-08-04 92 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
2. 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
3.页面跳转
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)
4.完整案例如下:
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>