Vue Router快速掌握——安装和设置路由

安装和设置路由

第一步：准备你要跳转的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：

1. main.js作为vue项目的js主文件，起着与App.vue同样至关重要的作用。
2. import router from ‘./router’是给项目js导入vue-router组件（这一句代码里面“import router”，这个“router”也可以叫其他的名字，只要在createApp(App).use(router).mount(’#app’)这一行里“.use(router)”的时候保持和import的时候相同的名字就可以）。
3. “.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!