Vue-Router 第一节：基础内容

Vue Router~ 是 Vue.js 的官方路由。他的作用是 让用Vue.js构建单页面应用变得更轻松。 今天来学习第一节，开始喽~ 不知如何创建Vue项目的请移步主页。

一、安装

安装 Vue-Router,以下是命令：

npm:  npm install vue-router@4
yarn: yarn add vue-router@4
pnpm: pnpm add vue-router@4

二、基础内容

1、定义路由

1、在src下创建一个router文件，在文件夹里创建index.ts文件。

2、在src下创建views文件夹，在里面创建组件页面

3、配置@/路径(小扩展)

第一步：打开tsconfig.json配置文件，在 /* Linting */ 下添加

// tsconfig.json 文件
​
"baseUrl": "",
    "paths": {
      "@/*": [ "src/*" ],
    }
​

第二步：在vite.config.ts 添加配置

  // vite.config.ts
  resolve: {
    // 设置文件./src路径为 @
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, './src')
      }
    ]
  }

第三步: 如果找不到path或者报错执行以下命令

npm install @types/node

4、定义路由并创建路由实例进行全局挂载

// router/index.ts
import About from '@/views/about/index.vue'
import { createRouter, createWebHistory,RouteRecordRaw} from "vue-router";
// 1、定义路由 每个路由都需要映射到一个组件。
const routes:Array<RouteRecordRaw> = [
    // 可直接导入或者引入
    {
        path: '/', 
        component: () => import("@/views/home/index.vue"),
    },
    {
        path: '/about', 
        component: About
    }
]
​
// 2、创建路由实例并传递routes
​
const router = createRouter({
    // 路由的模式：  vue2:
    // vue2 mode  history | vue3  createWebHistory
    // vue2 mode  hash    | vue3  createWebHashHistory
    // vue2 mode  abstact | vue3  createMemoryHistory   
    history: createWebHistory(),  
    routes
})
​
// 导出
export default router
​

// 在main.ts 创建并挂载实例
​
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import  router  from './router'
​
const app = createApp(App)
app.use(router)
app.mount('#app')
​

2、router-view

将显示与 URL 对应的组件。你可以把它放在任何地方，以适应你的布局。

现在我们想开启项目显示Home,我们就需要在APP.vue添加router-view

<template>
<div>
  <router-view />    // 显示与 URL 对应的组件
</div>
</template>
​
<script setup lang="ts">
</script>
​
​
<style scoped>
div {
  background-color: pink;
}
</style>

3、router-link

使用router-link来进行导航，其相当于一个带有href属性的a标签。它是通过 to 来制定路径。

    <div>
        <router-link to="/about">go About</router-link>
    <br>
      <router-link to="/">go Home</router-link>
      <router-view />
    </div>
    </template>
    ​
    <script setup lang="ts">
    </script>
    ​
    ​
    <style scoped>
    div {
      background-color: pink;
    }
    </style>

今天的小节就结束啦~