文章目录
一、介绍二、配置1、配置路由2、全局挂载3、使用 三、跳转1、JS2、router-link
本人最近在找工作，有推荐的小伙伴私我，不胜感激。
一、介绍
SPA(single page application):单页面应用，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。核心之一就是: 更新视图而不重新请求页面vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式 hash：默认，hash（#）是URL的锚点，代表的是网页中的一个位置，比如 localhost:8093/#/hello、localhost:8093/#/hi，hash值分别为#/hello、#/hi改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，因此改变 hash 不会重新
加载页面history：url中没有#，这种模式充分利用了html5 history interface 中新增的pushState、 replaceState方法，这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求当使用history模式时，需要后端支持（nginx-try_files），否则路由组件页面刷新会404两者在引用静态资源文件时也有区别 路由，就是指向的意思，主要是构建 SPA (单页应用)时，方便渲染你指定路由对应的组件，比如：请求/hello，就访问hello.vue组件，请求/hi，就访问hi.vue组件SPA只有一个index.html入口url，其他url都是通过前端路由跳转的
二、配置
1、配置路由
路由配置文件：src/router/index.jsRouter是Vue.js官方的路由管理器，管理routes中定义的路由//引入：createRouter（Router）；createWebHistory（history模式）；createWebHashHistory（hash模式）import { createRouter, createWebHistory } from 'vue-router'//routes是一组路由，把里面每一条路由组合起来，形成一个数组const routes = [ //注册一个路由 { //相当于给path取个别名，方便使用，不写默认为default，路由跳转时可以使用 name: 'About', //meta：头部信息；title：标签页名称；activeMenu：激活菜单的path meta: {title: '首页', activeMenu: '/result/result_survey'}, //自定义访问的url，不要包含或等于 vue.config.js 中的proxy //path不能重复，否则[Vue warn]: Duplicate keys detected: '/'. This may cause anupdate error path: '/about', /** * 该url指向的组件 * 引入组件两种方式 * 1、import：webpack打包时路由里的所有component都会打包在一个js中，页面多的话，这个文件会很大，造成进入首页时，需要加载的内容过多，时间相对比较长 * import screen from "@/components/screen" * component: screen * * 2、路由懒加载，两种写法，会将component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js * component: (resolve) => require(['@/components/screen'], resolve) * component: () => import('@/views/Home.vue') */ component: () => import('@/views/About.vue') }, //同一个目录下多个菜单 { path: '/qte', component: Layout, hidden: true, children: [ { //localhost:8080/system/dept name: 'Dept', meta: {title:'部门列表'}, path: 'dept', component: (resolve) => require(['@/views/system/dept/index'], resolve) }, { //localhost:8080/system/user name: 'User', path: 'user', meta: {title:'用户列表'}, component: (resolve) => require(['@/views/system/user/index'], resolve) } ] }]const router = createRouter({ //history模式 history: createWebHistory(process.env.BASE_URL), routes})export default router2、全局挂载
监听地址栏的改变，修改项目中的router-view组件应该加载的组件src/main.js//引入routerimport router from './router'//router实例注入到vue根实例createApp(App) .use(router) .mount('#app')3、使用
App.vue<template> <router-view/></template>三、跳转
1、JS
//引入路由import { useRouter } from "vue-router"export default { name: "Screen", setup(){ //定义router对象 const router=useRouter() //router对象的属性 { addRoute: afterEach: //返回上一个页面 back:() => go(-1) beforeEach: beforeResolve: //当前的路由信息 currentRoute:{ value:{ //path fullPath: "/screen?id=1", hash: "", href: "/screen?id=1", matched: [{…}] //meta meta: {title: '大屏'} //name name: "Screen" //params params: {} //path path: "/screen" //query query: {id: '1'} redirectedFrom: undefined } } //下一个页面 forward:() => go(1) getRoutes: go: hasRoute: install: isReady: listening: onError: options: push: removeRoute: replace: resolve: } /** * 1、query * url：http://localhost:8081/screen?id=1 */ //传参 router.push({name:'Screen',query: {id:1}}) //接收 const id=router.currentRoute.value.query.id /** * 2、params * 路由配置的path：path: '/screen/:id/:name' * url：http://localhost:8081/screen/1/kimi * */ //传参 router.push({name:'Screen',params: {id:1,name:'kimi'}}) //接收 const name=router.currentRoute.value.params.name //返回上一页面，利用router对象提供的back方法 function jumpBack(){ router.back() } return{ id, name, jumpBack } }}2、router-link
也是两种：query、params，和js的传参参数一样<template> <div class="home"> <router-link :to="{name:'Screen',params: {id:1,name:'kimi'}}">Screen</router-link> </div></template>