安装和设置路由
第一步:准备你要跳转的vue页面
在创建好的vue项目的src目录下创建views目录,里面放你准备跳转的vue文件(这里为了下面避免造成误会,我先在最顶部声明下吧,我创建的vue的项目名称是叫demo)
这里我以index.vue和about.vue为例:
demo\src\views\index.vue
<script setup>
</script>
<template>
首页内容
</template>
<style scoped>
</style>
demo\src\views\about.vue
<script setup>
</script>
<template>
关于我们
</template>
<style scoped>
</style>
第二步:给你的vue项目安装vue-router
这里我使用的是vue-router4,以下指令会为你的项目安装vue-router4系列的最新版本:
npm install vue-router@4
第三步:为vue项目配置vue-router
说白了,就是给我们的项目设置:当我们访问哪个url时,会跳转显示哪个页面
应该在src目录下创建一个router目录,router目录下创建index.js文件,设置该步
demo\src\router\index.js
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
const routes = [
{
path: "/", // http://localhost:端口号
component: () => import("../views/index.vue")
},
{
path: "/about", // http://localhost:端口号/about
component: () => import("../views/about.vue")
},
]
const router = createRouter({
//使用url的#符号之后的部分模拟url路径的变化,因为不会触发页面刷新,所以不需要服务端支持
//history: createWebHashHistory(),
history: createWebHistory(),
routes
})
export default router
ps:这里history参数可选择createWebHashHistory()或者createWebHistory()。区别是如果选择前者的话,我们页面访问的url应该是“http://localhost:端口号/#/”、“http://localhost:端口号/#/about”这样的,可以看到在网址的url里面多了一个“ /# ”。
第四步:让项目用上vue-route组件
给src目录下的main.js添加如下代码:
import router from './router'
并且将该文件中的代码行
createApp(App).mount('#app')
改成:
createApp(App).use(router).mount('#app')
ps:
- main.js作为vue项目的js主文件,起着与App.vue同样至关重要的作用。
- import router from ‘./router’是给项目js导入vue-router组件(这一句代码里面“import router”,这个“router”也可以叫其他的名字,只要在createApp(App).use(router).mount(’#app’)这一行里“.use(router)”的时候保持和import的时候相同的名字就可以)。
- “.use(router)”是使用我们在router\index.js里写好的路由路径,在项目里我们一定要牢记,路由并不是写好了就完事了,我们还要在main.js里导入并且使用(use)它
第五步:把路由的出口引到App.vue页面中
这里就暂且称App.vue为页面吧,虽然严格来讲这样说并不严谨,但目前为了帮助理解,就暂且先这样讲吧
demo\src\App.vue
<script setup>
</script>
<template>
<router-view />
</template>
<style scoped>
</style>
路由写完了必须要把出口 <router-view / >展示在.vue文件的template标签中,外部浏览器才可以看到。
至此,大功告成了!Congratulations!