Vue3+TypeScript+Router+Vuex+Ant-Design-Vue项目（四）—— vue-router 基本配置

App.vue

修改 App.vue 文件：

<script lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
export default {
  name: 'App',
  setup() {
    // setup(props, context)
    // props - 组件接受到的属性 context - 上下文
    // vue3 中用 setup 函数整合了所有的 api；只执行一次，在生命周期函数前执行，所以在 setup 函数中拿不到当前实例 this，不能用 this 来调用 vue2 写法中定义的方法
  },
}
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view></router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

router

在 src 下新建 router 文件夹，并在文件夹内创建 index.ts：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: () => import("@/views/index.vue")
  },
  {
    path: '/example',
    name: 'example',
    component: ()=> import('@/views/example.vue')
  },
  {
    path: '/test',
    name: 'test',
    component: ()=> import('@/views/TestPage.vue')
  }
]

export default createRouter({
  // createWebHashHistory (hash路由 Hash模式 #)
  // createWebHistory (history路由 HTML5 模式 推荐，需要服务器配置支持)
  // createMemoryHistory 带缓存 history 路由
  history: createWebHistory(),
  routes
})

PS：在引入.vue文件时一定要带上后缀名，否则会报找不到文件。

main.ts

main.ts 修改：

import { createApp } from 'vue'
// 引入Antd 
import Antd from 'ant-design-vue'
import router from './router/index'
import App from './App.vue'
// 样式文件需要单独引入
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)
app.use(Antd)
app.use(router)
app.mount('#app')

Views

index.vue

在 src 下新建 views文件夹，并在文件夹内创建 index.vue：

<template>
  <HelloWorld></HelloWorld>
</template>

<script lang="ts">
import HelloWorld from "../components/HelloWorld.vue";
import { defineComponent } from "vue";
export default defineComponent({
  name: "Home",
  components: { HelloWorld },
  setup() {
    return {
    };
  },
});
</script>

HelloWorld.vue

在components文件夹内创建 HelloWorld.vue：

<template>
  <button @click="handleclick">点击跳转TestPage</button>
  <p>Edit <code>The HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
import { defineComponent } from "vue";
import { useRoute,useRouter } from 'vue-router'
export default defineComponent({
  name: 'Index',
  setup () {
    const route = useRoute() // 相当于 vue2 中的 this.$route route   用于获取当前路由数据
    const router = useRouter(); // 相当于 vue2 中的 this.$router router  用于路由跳转
    function handleclick () {
      router.push({ path: '/test' })
    }
    return {
      handleclick
    }
  }
})
</script>

TestPage.vue

在views文件夹内创建 TestPage.vue：

<template>
  <div class="about">
    <h1>Ant-Design-Vue</h1>
    <h3>Button</h3>
    <a-button type="primary"> Primary </a-button>
    <a-button>Default</a-button>
    <a-button type="dashed"> ashed </a-button>
    <a-button type="danger"> Danger </a-button>
    <a-config-provider :auto-insert-space-in-button="false">
      <a-button type="primary"> 按钮 </a-button>
    </a-config-provider>
    <a-button type="primary"> 按钮 </a-button>
    <a-button type="link"> Link </a-button>
    <h3>栅栏</h3>
    <a-row>
      <a-col :span="12"> col-12 </a-col>
      <a-col :span="12"> col-12 </a-col>
    </a-row>
    <a-row>
      <a-col :span="8"> col-8 </a-col>
      <a-col :span="8"> col-8 </a-col>
      <a-col :span="8"> col-8 </a-col>
    </a-row>
    <a-row>
      <a-col :span="6"> col-6 </a-col>
      <a-col :span="6"> col-6 </a-col>
      <a-col :span="6"> col-6 </a-col>
      <a-col :span="6"> col-6 </a-col>
    </a-row>
  </div>
</template>

页面效果：

2.x版本 和 3.x版本对比

2.x版本

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/Test.vue')
  }
]
const router = new VueRouter({
  mode:"history",
  routes
})
export default router

2.x 采用构造函数构建 Vue Router 实例。
在路由模式配置上，2.x 是配置mode option。

3.x版本

import { createRouter, createWebHistory } 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')
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/Test.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

3.x 采用 createRouter 去创建 Vue Router 实例。

在路由模式配置上，3.x是采用vue-router中的createWebHistory方法去创建history属性，history模式用createWebHistory方法创建history属性，hash模式则需要使用createWebHashHistory方法来创建。