admin管理员组文章数量:1635364
文章目录
- 一、介绍
- 二、配置
- 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
- 两者在引用静态资源文件时也有区别
- hash:默认,hash(#)是URL的锚点,代表的是网页中的一个位置,比如 localhost:8093/#/hello、localhost:8093/#/hi,hash值分别为#/hello、#/hi
- 路由,就是指向的意思,主要是构建 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>
版权声明:本文标题:vue3路由Router的配置和跳转 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729176413a1188774.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论