路由配置
vite环境当下载好router模块需要手动创建
1.安装路由依赖模块
npm install vue-router
2.在src文件夹下新建router文件夹,在router文件夹下新建index.js文件
3.在index.js文件下配置路由
4.main.js中引入路由
//router文件夹下新建index.js文件
import { createRouter, createWebHistory } from 'vue-router'
//注册路由
const routes = [
{
path: '/',
name: 'Box1',
component: () => import('../Box1.vue')
},
{
path: '/hi',
name: 'hi',
component: () => import('../components/hi.vue')
}
];
const router = createRouter({
// createWebHashHistory()是使用hash模式路由
// createWebHistory()是使用history模式路由
history: createWebHistory(),
routes
});
export default router;
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import myhttp from './myhttp/index.js'
// 引入路由
import router from './router/index.js'
const app=createApp(App);
app.use(myhttp);
app.use(router);
app.mount('#app')
//app.use(router)必须要在mount之前调用,否则组件内部无法使用
路由使用
使用思路跟vue 2差不多只不过语法略微有变化
//路由文件
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'home',
component: () => import('../views/Home.vue'),
//独享守卫
beforeEnter(to,from,next){
next()
}
},
{
path: '/car',
name: 'car',
component: () => import('../views/Car.vue'),
children:[
{
path: '/car/son1',
name: 'son1',
component: ()=>import("../views/Son1.vue")
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
//全局守卫
router.beforeEach((to,from,next)=>{
next()
})
router.beforeResolve((to,from,next)=>{
next()
})
router.afterEach((to,from)=>{
})
export default router;
//组件内部的使用
import {onBeforeRouteLeave,useRouter,useRoute} from "vue-router"
let router=useRouter()
let fn=()=>{
let route=useRoute()
console.log(route.query)
router.push({path:"/car/son1",query:{id:123}})
}
//组件内的守卫钩子
onBeforeRouteLeave((to,from,next)=>{
console.log(66666,"离开")
next()
})
router-view和router-link组件使用不变