Vue 路由配置 为什么使用路由?
??在项目中创建了 First.vue 和 Second.vue 两个页面,如果按照组件方式进行操作这两个页面,数据固定显示在 App.vue 中,但是我们知道正常项目都是通过不同的 URL 控制显示不同页面。在 SPA(单页面应用) 项目中,也是需要通过不同的 URL 在 App.vue 中显示不同的数据。路由做的是通过 URL 控制哪个页面显示在 App.vue 中的功能/组件。
什么是路由?
?? 在 Vue 中路由就是控制显示哪个页面,通过路由显示的页面是显示在 App.vue 中的,当更改 URL 后只改变 App.vue 页面中路由部分对应的内容,也就是说通过路由显示时,也是属于局部刷新效果。
注:在 App.vue 中通过
显示路由内容。
1. 安装路由依赖
在 IDEA 中的 Terminal 面板运行命令:cnpm install --save vue-router
文章图片
说明:--save
表示把添加的依赖写入到 package.json,如果没有 --save
效果上也是可以的,但是加上可以更好的知道项目都使用了哪些组件。
运行成功后会在 package.json 中增加了 router 相关依赖:
文章图片
2. 新建两个页面
在 src 下新建了 views 文件夹,并在该文件夹下新建了两个 .vue
的页面:
文章图片
页面一:src/views/First.vue
The First Page.
>
export default {
name: "First"
}
scoped>
页面二:
src/views/Second.vue
The Second Page.
>
export default {
name: "Second"
}
scoped>
此时这两个页面是无法直接访问的。
3. 修改 main.js
import { createApp } from 'vue'
import App from './App.vue'//1.导入路由依赖,安装了vue-router组件后系统自带的依赖
import { createRouter, createWebHistory } from 'vue-router';
//2.导入两个页面
import First from "@/views/First";
import Second from "@/views/Second";
//3.创建路由对象,new VueRouter为上面import设置的名称
const router = createRouter({
history: createWebHistory(), //没有history,访问URL会有#
routes:[
{
path: '/first',
component: First
},
{
path: '/second',
component: Second
},
]
});
//注意use要在mount之前,使用该路由
createApp(App).use(router).mount('#app');
4. 修改 App.vue
必须要有
否则无法显示路由控制的页面。
这里是 App.vue 页面
文章图片
文章图片
注意:如果
npm run serve
启动运行项目时,出现如下的保存信息:文章图片
需要在 vue.config.js 的配置文件中,加入一行
lintOnSave:false
,再重新启动项目运行。const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false//添加这一行
});
5. 优化结构
把 main.js 中和路由相关的内容放到一个单独的 js 文件中,这代码更容易维护。在 src 下新建 router 文件夹,在文件夹中新建 index.js。
文章图片
1、
index.js
//1.导入路由依赖,安装了vue-router组件后系统自带的依赖
import { createRouter, createWebHistory } from 'vue-router';
//2.导入两个页面
import First from "@/views/First";
import Second from "@/views/Second";
const routerHistory = createWebHistory();
//3.创建路由对象,new VueRouter为上面import设置的名称
const router = createRouter({
history: routerHistory,
routes:[
{
path: '/first',
component: First
},
{
path: '/second',
component: Second
},
]
});
export default router;
最后一行
export default router
必须将这个配置好的路由信息导出,否则 main.js 无法获取 router 对象。2、
main.js
import { createApp } from 'vue'
import App from './App.vue'//导入./router/index文件里面配置好的路由
import router from './router/index'//注意use要在mount之前,使用该路由
createApp(App).use(router).mount('#app');
【前端设计|Vue 路由配置】这样优化之后对于代码维护更加简便。
推荐阅读
- 前端设计|Vue 异步请求
- vxe-grid 数据代理 对接 后台接口
- 问题解答DPST1091 CSpotify
- Leetcode2两数相加(链表应用)
- 明道云如何实现银行内部评级管理
- ES6|ES6新特性②
- 项目开发|用node+WebSocket+MySQL+vue仿做学习通的一些功能(二)(主页的展示)
- 前端|js和vue如何调用百度地图
- Typescript 学习笔记