<>Vue 路由配置

为什么使用路由?

  在项目中创建了 First.vue 和 Second.vue 两个页面,如果按照组件方式进行操作这两个页面,数据固定显示在 App.vue
中,但是我们知道正常项目都是通过不同的 URL 控制显示不同页面。在 SPA(单页面应用) 项目中,也是需要通过不同的 URL 在 App.vue
中显示不同的数据。路由做的是通过 URL 控制哪个页面显示在 App.vue 中的功能/组件。

什么是路由?

   在 Vue 中路由就是控制显示哪个页面,通过路由显示的页面是显示在 App.vue 中的,当更改 URL 后只改变 App.vue
页面中路由部分对应的内容,也就是说通过路由显示时,也是属于局部刷新效果。

注:在 App.vue 中通过 <router-view> 显示路由内容。

<>1. 安装路由依赖

在 IDEA 中的 Terminal 面板运行命令:cnpm install --save vue-router

说明:--save 表示把添加的依赖写入到 package.json,如果没有 --save 效果上也是可以的,但是加上可以更好的知道项目都使用了哪些组件。

运行成功后会在 package.json 中增加了 router 相关依赖:

<>2. 新建两个页面

在 src 下新建了 views 文件夹,并在该文件夹下新建了两个 .vue 的页面:

页面一:src/views/First.vue
<template> The First Page. </template> <script> export default { name: "First"
} </script> <style scoped> </style>
页面二:src/views/Second.vue
<template> The Second Page. </template> <script> export default { name:
"Second" } </script> <style scoped> </style>
此时这两个页面是无法直接访问的。

<>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

必须要有 <router-view/> 否则无法显示路由控制的页面。
<template> <div id="app"> <p>这里是 App.vue 页面</p> <!--路由视图--> <router-view/> <
MyComponent name="张三" v-bind:age="15"></MyComponent> </div> </template>

注意:如果 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');
这样优化之后对于代码维护更加简便。

技术
©2019-2020 Toolsou All rights reserved,
程序员的520,送给女友的几行漂亮的代码(python版)基于stm32控制四轮小车电机驱动(一)linux查看磁盘空间命令实验四 自动化测试工具-软件测试axios拦截器封装与使用C语言——qsort函数opencv-python傅里叶变换以及逆变换在算法研究过程中如何进行算法创新nc的安装和简单操作C语言做一个简易的登陆验证(功能)界面