vue3中使用vue-router

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

1. 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>

导航守卫官方介绍