Vue3项目之简单路由设置
- Vue Router官网教程:https://router.vuejs.org/zh/introduction.html
一、在项目中安装并引入Vue Router
- 在项目终端中输入
npm install vue-router@4
,安装Vue Router; - 在main.ts或main.js,我这里是main.ts,即项目主入口文件中引入Vue Router,代码如下。
import router from './router'
const app = createApp(App)
app.use(router)
- 如果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;
三、在组件中使用路由
- 以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>
- 以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>