登录/注册
开开
8429
占位
8
占位
12
浏览量
占位
粉丝
占位
关注
vue3 路由封装
开开
2022-08-04 16:11:41 2022-08-04
31
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>
暂无评论