前置课程:
首先应该明白什么是 router 就是路由的意思,那什么是路由,路由就是控制不同 url 路径展示不同的内容,比如访问
localhost/home 打开的应该是主页;访问localhost/guangchuang显示的应该是广场相关的内容,就这是对路由的简单了解。
如何实现
- 在vue 项目创建后,安装路由插件,npm install router --save
- 运行项目,打开项目文件夹
- 接着在src 的目录下去创建一个router 的文件夹作为管理路由的入口。
- 然后在 router 文件夹下创建一个 index.js的文件,作为配置路由关键内容
- 接着在 main.js里导入这个 router 下的 index.js然后在 app 里挂载使用。
import router from './router' //写到 main.js里
createApp(App).use(router).mount('#app')
到这里基本的配置久结束了,然后开始配置 index.js文件
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 固定写法上面的
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
# 配置具体的路由信息
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
// 然后创建路由,相关信息扔里面
export default router
最后导出即可,这里导出是在 mainjs里导入使用的所以是一一对应的。
如何看到效果
- 在有了上面铺垫就可以在下面进行功能实现了。
- 我们在 src 创建view 视图的文件夹然后,创建俩组件到后面使用,内容随便。
- 然后在我们想要使用的页面,去写代码。在这之前我要介绍俩个标签。
<router-link to="/about">About</router-link>
这是路由的标签,和 a 标签类似,to 的参数就是在 index.js 下的 router
里配置的路径
<router-view/> // 这个标签是 路由展示的标签,有了这个标签,跳转的内容才会显示。
结尾梳理
Vue 3 项目使用 Vue Router 流程图
-
安装 Vue Router
- 使用 npm 或 yarn 安装
vue-router@4
- 使用 npm 或 yarn 安装
-
创建路由配置文件
index.js
- 在
src
目录下创建router
文件夹 - 创建
index.js
并定义路由
- 在
-
在
main.js
中引用路由配置- 引入并使用路由配置
-
使用路由标签
<router-view>
和<router-link>
- 在组件模板中使用
<router-view>
展示组件 - 使用
<router-link>
实现导航
- 在组件模板中使用
-
运行项目
- 使用
npm run serve
或yarn serve
启动项目
- 使用