vue3 路由配置和使用

3,093 阅读1分钟

路由配置

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组件使用不变