1.安装
npm install vue-router
2.创建router文件，在main.js引入，创建home.about页面 app.vue文件添加路由占位符
router/index.js
import { createRouter,createWebHashHistory, createWebHistory } from 'vue-router'import home from './views/home.vue'import about from '../views/about.vue'const routes = [{path:'/home',component: home},{path:'/about',component: about}]const router = createRouter({// hash 模式跟 history 模式history: createWebHashHistory(),routes})export default router
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from "./route/index"
const app = createApp(App)
app.use(router)
app.mount('#app')app.vue
<!-- replace 替换路径，不会回退 --><router-link to="/home" replace active-class="active">首页</router-link><router-link to="/about" active-class="active">关于</router-link><router-view></router-view>
3.路由懒加载，redirect 从定向
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'// 路由懒加载
// const home = () => import(/* webpackChunkName :'home'*/'../views/home.vue')
// const about = () => import(/* webpackChunkName :'about'*/'../views/about.vue')
const routes = [{path: '/',redirect: '/home'},{path: '/home',name: 'home',component: () => import(/* webpackChunkName :'home'*/'../views/home.vue'),},{path: '/about',name: 'about',component: () => import(/* webpackChunkName :'about'*/'../views/about.vue')}
]
const router = createRouter({history: createWebHistory(),routes
})
export default router
4.动态路由 创建user.vue文件
router/index.js
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
const routes = [// 动态路由{path: '/user/:id',name: 'user',component: () => import('../views/user.vue')}
]
const router = createRouter({history: createWebHistory(),routes
})
export default router
app.vue
<router-link to="/user/123" active-class="active">用户123</router-link><router-link to="/user/456" active-class="active">用户456</router-link>
user.vue
<div>user{{ $route.params.id }}</div>
5.404页面处理，创建404文件
使用 pathMatch
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
const routes = [// 404 页面不存在路由 后面加* 会解析输入的路径，不加则不解析{path: '/:pathMatch(.*)*',component: () => import('../views/404.vue')}
]
const router = createRouter({history: createWebHistory(),routes
})
export default router
6.路由嵌套 创建详情1，2 文件
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
const routes = [{path: '/',redirect: '/home'},{path: '/home',name: 'home',component: () => import(/* webpackChunkName :'home'*/'../views/home.vue'),children: [{path:'/home',redirect:'/home/detailOne'},{path: 'detailOne', //等同于 /home/detailOnecomponent: () => import('../views/detailOne.vue')},{path:'detailTwo',component:()=> import('../views/detailTwo.vue')}]}
]
const router = createRouter({history: createWebHistory(),routes
})
export default router
7.编程式跳转
app.vue 添加点击事件
<hr /><span @click="homeBtnClick">首页</span><button @click="aboutBtnClick">关于</button><button @click="goBack">返回</button><router-view></router-view>
添加事件方法 query 传参
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
function homeBtnClick() {router.push("/home");
}
function aboutBtnClick() {router.push({path: "/about",query: {name: "言念",age: 24,},});
}
function goBack() {router.back();router.go(-1);
}
</script>
about.vue
<template><div class="about">about<h1>{{$route.query}}</h1></div>
</template>
<script setup>
</script>
<style scoped></style>
8.完整router/index.js
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// import home from '../views/home.vue'
// import about from '../views/about.vue'// 路由懒加载
// const home = () => import(/* webpackChunkName :'home'*/'../views/home.vue')
// const about = () => import(/* webpackChunkName :'about'*/'../views/about.vue')
const routes = [{path: '/',redirect: '/home'},{path: '/home',name: 'home',component: () => import(/* webpackChunkName :'home'*/'../views/home.vue'),children: [{path:'/home',redirect:'/home/detailOne'},{path: 'detailOne', //等同于 /home/detailOnecomponent: () => import('../views/detailOne.vue')},{path:'detailTwo',component:()=> import('../views/detailTwo.vue')}]},{path: '/about',name: 'about',component: () => import(/* webpackChunkName :'about'*/'../views/about.vue')},// 动态路由{path: '/user/:id',name: 'user',component: () => import('../views/user.vue')},// 404 页面不存在路由 后面加* 会解析输入的路径，不加则不解析{path: '/:pathMatch(.*)*',component: () => import('../views/404.vue')}
]
const router = createRouter({history: createWebHistory(),routes
})
export default router
9.完整的app.vue
<template><div class="app"><h1>app content</h1><!-- replace 替换路径，不会回退 --><router-link to="/home" replace active-class="active">首页</router-link><router-link to="/about" active-class="active">关于</router-link><router-link to="/user/123" active-class="active">用户123</router-link><router-link to="/user/456" active-class="active">用户456</router-link><hr /><span @click="homeBtnClick">首页</span><button @click="aboutBtnClick">关于</button><button @click="goBack">返回</button><router-view></router-view></div>
</template><script setup>
import { useRouter } from "vue-router";
const router = useRouter();
function homeBtnClick() {router.push("/home");
}
function aboutBtnClick() {router.push({path: "/about",query: {name: "言念",age: 24,},});
}
function goBack() {router.back();router.go(-1);
}
</script>
<style>
.active {color: red;font-size: 20px;
}
</style>
