ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue路由和路由安装 [打印本页]

作者: 种地 时间: 2024-10-9 06:35
标题: vue路由和路由安装
一，路由理解

1）理解：一个路由（route）就是一组映射关系（key-value)，多个路由须要路由器（router）举行管理
2）前端路由：key是路径，value是组件
3）作用：使用Vue路由有以下几个主要优点：
实现页面的无刷新切换：使用Vue路由可以在单个web页面中实现应用程序内的页面切换，而无需重新加载整个页面，这将更快地为用户提供哀求的内容。
实现嵌套路由和视图：Vue路由使您可以将组件树映射到路由，以构建复杂的用户界面，同时保持组件和路由之间的关系。
管理应用程序状态：Vue路由可以方便地管理应用程序的状态。您可以根据路由参数向组件传递数据，并在路由更改时使用钩子函数来更新状态。
多种导航模式：Vue路由支持不同的导航模式：hash模式（默认）和history模式。hash模式使用欣赏器URL中的哈希符号（#）来管理路由状态，而history模式使用HTML5汗青API。
二、路由安装

路由安装，个人建议用局部安装，全局安装大概会有版本不兼容问题。
下面是我整理的路由安装：
1、Cmd用管理员创建创建一个vue项目

2、vue create 项目名 （注意：该项目名就是我们vscode须要引入的项目根目录）

复制内网就可以，复制到欣赏器里，出现一下界面就乐成啦

在终端输入指令并回车：
npm install vue-router --save

此时可以查看两个地方，是否下载乐成：
Package.json里面有对应的vue-router引入

Node-modules里面也有vue-router文件夹

这时间代表你的路由下载乐成了，我们须要引入它
修改App.vue

<template>
<img src="./assets/logo.png">
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>

复制代码

在src下新建router文件夹，并在文件下新建index.js文件，内容如下：

import { createRouter,createWebHistory } from "vue-router";
import HelloWorld from '../components/HelloWorld.vue';
const router = createRouter({
history:createWebHistory(),
routes:[
{
path:'/',
component:HelloWorld,
}
]
})
export default router;

复制代码

在main.js中添加路由

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";
createApp(App).use(router).mount('#app')

复制代码

全部弄完以后 npm run serve 运行即可

正常运行就没啥问题了。

举行路由的测试：

这里可以看一个csdn博主的教程，内容很明确，一步一步来就可以

(20条消息) vue3 配置路由_vue3路由_悟世君子的博客-CSDN博客

https://blog.csdn.net/wsjzzcbq/article/details/117789118?ops_request_misc=%7B%22request_id%22%3A%22168596798516800182795734%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=168596798516800182795734&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-117789118-null-null.142%5Ev88%5Econtrol_2,239%5Ev2%5Einsert_chatgpt&utm_term=vue3%20%E9%85%8D%E7%BD%AE%E8%B7%AF%E7%94%B1&spm=1018.2226.3001.4187

从第二部新建页面开始做即可

写文章不易，感谢网友们的点赞！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)