vue3与js的router基本使用方式

title: vue3与js的router基本使用方式
tags:

vue3
js
abbrlink: ‘57270957’
date: 2024-04-17 18:54:47

第一步快捷引入的别名

使用路由需要大量在src文件中引用所需要的地址，并且组件中也需要很多的包的引用，将快速跳转到src这一文件的步骤进行简化操作是非常有必要的。

在vite.config.js文件中就可以帮助构成。一般将./取别名为~（可直接调用同级文件名），将./src取别名为@

//第一步内置模块用来配置路径
import path from 'path'export default defineConfig({resolve:{//需要用到的插件数组plugins:[vue()]alias: {//设置路径（两个下划线）//./当前同级目录+其他文件名'~':path.resolve(__dirname,'./'),//@直接走到src文件目录下'@':path.resolve(__dianame,'./src')}}
})

第二步写组件

在src中的pages或views中将组件的样式基本定制好，然后等待调用使用，例如

<template>这是一个组件页面
</template><script setup name='Online'></script>

注意：直接在script中写name的方法有多种，其中比较简单的是使用unplugin-vue-define-options插件，然后再安装一个叫做vue-official的插件（以前叫做volar）

第三步在router文件中完成配置

安装vue-router@4

npm install vue-router@4

在router文件中的index.js文件中引入包，引入路径。

//首先引入路由方法,使用HashHistory和WebHistory不同，具体为表现路径的不同，前面是#，后面是路径名称
import {creatRouter,creatWebHashHistory,creatHoshHistory}from 'vue-router'//建立路由配置公共路由数组
const roueters=[]const router = creatRouter({history:creatWebhistory(),//routers:routers,key与value值相同可以省略写routers   
})//发出去
export default router

第四步在main文件中引入路由

在同级目录下的mian.js文件中引入路由

import {creatApp} from 'vue'
import ElementPlus form 'element-plus'
import App from'./App.vue
//引入
import router from './router'//建立app对象
const app = creatApp(App)//使用路由
app.use(router)//使用elementplus
app.use(ElementPlus)//使用挂载对象
app.mount('#app')

第五步完善router中的组件调用

一般这个路由组件文件的名字会叫做pages或者views，我们可以通过router文件下的index.js(第三步中已经建立好了基本框架，只要处理第三步代码的数组内容就可以了)来进行相关的调用。

第一种路由普通使用方法

import {creatRouter,creatWebHashHistory,creatHoshHistory}from 'vue-router'//引入组件地址
import a from '@/view/a.vue'
import b from '@/view/b.vue'//建立路由配置公共路由数组，进行view组件中的调用
const roueters=[{name:'a',path:'/a',component:a},{name:'b',path:'/b',component:b}
]const router = creatRouter({history:creatWebhistory(),routers   
})export default router

第二种路由嵌套使用方法

const router = createRouter({history:createWebHistory(),routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail',component:Detail}]},{name:'guanyu',path:'/about',component:About}]
})
export default router

注意：使用name属性可以帮助后期优化router-link操作,如果设计到多级跳转，命名是一个非常明智的选择。

<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link><!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

第六步在App.vue中进行引用路由

<script setup>
</script>
<template><!-- 将五的路由引入--><router-view></router-view>
</template>
<style>
</style>

进阶引用如下：

<template><!--划分区域--><div class="app"><div class="title"><h2>Vue路由测试</h2></div><!--导航区--><div class="navigate"><RouterLink to="/home" active-class="active">首页</RouterLink><RouterLink :to="{name:'newspaper'}" active-class="active">新闻</RouterLink><RouterLink :to="{path:'/About'}" active-class="active">关于</RouterLink><!-- <RouterLink to="/About" active-class="active">关于</RouterLink> --></div><!--展示区--><div class="main-content"><!-- 内容展现位置 --><RouterView></RouterView></div></div>
</template><script lang="ts" name="App" setup>//引入路由import { RouterLink,RouterView } from 'vue-router';
</script>