Vue3+TS项目之简单路由设置

Vue3项目之简单路由设置

• Vue Router官网教程：https://router.vuejs.org/zh/introduction.html

一、在项目中安装并引入Vue Router

1. 在项目终端中输入npm install vue-router@4，安装Vue Router；
2. 在main.ts或main.js，我这里是main.ts，即项目主入口文件中引入Vue Router，代码如下。

  import router from './router'
  const app = createApp(App)
  app.use(router)

4. 如果src目录下没有router文件夹目录，手动创建一个router文件夹目录。

二、定义路由

在router文件夹中新建一个文件index.ts，然后在其中输入以下代码，其中引入组件时需要按自己写的组件路径进行引用，path:'/'表示默认路由即打开的第一个页面。

//在vue-router引入createRouter和createWebHashHistory
import {createRouter,createWebHashHistory} from "vue-router";
//引入组件，及要跳转到的页面，也可以直接写在routes中的component里
import Login from "../views/login/Login.vue";
import About from '../views/About.vue';
import Register from "../views/register/Regist.vue";

//定义路由，每个路由都需要映射到一个组件。
const routes = [
  { 
    path: '/', 
    component: Login 
  },
  {
    path: '/register',
    component: Register
  },
  {
    path: '/about',
    component: About
  }
]

//创建路由实例并传递routes配置
const router = createRouter({
  //内部提供了history模式的实现。为了简单起见，我们在这里使用hash模式。
  history: createWebHashHistory(),
  routes, //'routes: routes' 的缩写
})

//暴露出router实例。方便在其他组件更改路由
//这样可以在任意组件中以 this.$router的形式访问它，并且以this.$route的形式访问当前路由
export default router;

三、在组件中使用路由

1. 以router-link的方式改变路由，跳转页面。代码如下（以下代码是写在‘/’路由路径下）。

<template>
  <div>
    <p>
    <router-link to="/register">注册页</router-link>
    <router-link to="/about">About页</router-link>
  </p>
  <router-view></router-view>
  </div>
</template>

<script lang="ts" setup>

</script>

2. 以useRouter实例的方式改变路由，跳转页面。（这里不用this.$router的形式访问而实例useRouter()是因为this指向会报错，需要在添加const that=this;然后使用that.$router）。代码如下（以下代码是写在‘/’路由路径下）。

<template>
  <div>
    <a @click="handleSubmit">登录</a>
    <a @click="signUp">注册 </a>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();

//登录点击事件
const handleSubmit =() => {
  router.push('/about');
};

//注册点击事件
const signUp = () => {
  router.push('/register');
};
</script>