精宏技术部试用期学习笔记（vue）

router ： vue的模拟路由

前置准备

安装 vue-router

pnpm i vue-router@4
//安装版本4的 vue-router

可以在 package.json 文件中查看依赖

  "dependencies": {
    "vue": "^3.3.4",
    "vue-router": "4" //这里
  },

新建文件夹 /src/pages/ 用于存放 vue内置路由

基本思想

在一个 vue页面中替换不同的 vue组件

来实现模拟路由

实际操作：

在 index.ts 中创建 router 并导出

在 main.ts 中把 router 挂载在 app.vue 上

在 app.vue 中使用来呈现各个路由上挂载的 component

代码 Code

在 pages 下创建 index.ts

/* index.ts */
import { createRouter, createWebHistory } from "vue-router";
import HelloWorld from "../components/HelloWorld.vue"


const routes = [
    {
        path: "/",
        name: "Home",
        component: HelloWorld
    }
    /* 这里写入各个route
     path 模拟路由的访问
     component 该路由使用的vue组件 */

]

//将上面的数据载入 并创建router实例
const router = createRouter({
    history: createWebHistory(),
    /* 由于vue-router实际上是对router的模拟
    所以使用history来实现浏览器的进退功能 */
    routes: routes
})

//导出
export default router;

在 main.ts 中挂载 router

此处原本应为 main.js 但改成ts了

/* main.ts */
import { createApp } from 'vue'
import App from './App.vue'
import router from './pages/index.ts'
//引入 router

const app = createApp(App);

app.use(router);
// .use() 对组件进行挂载

app.mount('#app');

在 App.vue 中用元素呈现

<template>
  <router-view />
</template>

完成以上步骤即可完成 router 的切换

另：a标签可以实现跳转

<a href="/RouterName">跳转</a>

526互联

[vue]精宏技术部试用期学习笔记 II

精宏技术部试用期学习笔记（vue）

router ： vue的模拟路由

前置准备

基本思想

代码 Code