vue-router
在vue3中,使用新版的vue-router https://router.vuejs.org/zh/
首先安装 npm install vue-router@4
unplugin-auto-import
安装免导入插件 https://www.npmjs.com/package/unplugin-auto-import
npm i -D unplugin-auto-import
配置使其生效
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({ imports:['vue','vue-router'] }),
],
})
之后,括号中的包就不需要再导入了
配置使用vue-router
前端路由
前端路由的核心是在改变视图的同时不会向后端发出请求
hash模式与history模式区别:hash模式url里面永远带着#号,在开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url适合推广宣传。同时在功能上,开发app的时候有分享页面,把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式,但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上。
- 路由的哈希模式其实是利用了window可以监听onhashchange事件,url中的哈希值(#后面的值)如果有变化,前端是可以做到监听并做一些响应,即使前端并没有发起http请求他也能够找到对应页面的代码块进行按需加载。也叫前端路由,成为了单页应用标配。如网易云音乐的url模式:https://music.163.com/#/friend
- 对于history模式,因为window的新特性pushState与replaceState可以将url替换并且不刷新页面,虽然路径替换了,但http并没有去请求服务器该路径下的资源,一旦刷新就会暴露,显示404。解决这个弊端可以配置服务器端,就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源,它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!。
history模式下,build之后本地 index.html 打开是无效的。hash模式下,build之后本地 index.html 打开正常!
编写router
在src目录下新建index.js
import { createRouter, createWebHashHistory } from 'vue-router' // 使用插件可以不加这个
import Home from '../views/Home.vue'
const routes = [
{ path: '/', name:"Home",component: Home },
{ path: '/about',name:"About", component: ()=>import("../views/About.vue") },
]
const router = createRouter({
history: createWebHashHistory('/admin'), // 编写后台就这么写
routes,
})
export default router
在main.js中引用
import router from './router/index.js'
const app = createApp(App)
app.use(router).use(ElementPlus)
编写导航组件,这里用了el组件
<script setup>
const activeIndex = ref('1')
//或者 const route = useRouter()
const route = new useRouter
const about = () => { route.push('/about') }
</script>
<template>
<el-menu :default-active="activeIndex" mode="horizontal">
<el-menu-item index="1">
<router-link to="/">图表</router-link>
</el-menu-item>
<el-menu-item index="4" @click='about'>
关于
</el-menu-item>
</el-menu>
</template>
<style scoped>
</style>
在页面添加
<script setup>
import pageHeader from './components/pageHeader.vue';
</script>
<template>
<pageHeader></pageHeader>
<router-view></router-view>
</template>
导航守卫官方介绍