文章目录

• 一、介绍
• 二、配置
• • 1、配置路由
  • 2、全局挂载
  • 3、使用
• 三、跳转
• • 1、JS
  • 2、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.js
• Router是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 router

2、全局挂载

• 监听地址栏的改变，修改项目中的router-view组件应该加载的组件
• src/main.js

//引入router
import 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>