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

1. <template>
2.   <img src="./assets/logo.png">
3.   <div id="app">
4.     <router-view/>
5.   </div>
6. </template>
7. <script>
8. export default {
9.   name: 'App'
10. }
11. </script>

复制代码

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

1. import { createRouter,createWebHistory } from "vue-router";
2. import HelloWorld from '../components/HelloWorld.vue';
3. const router = createRouter({
4.     history:createWebHistory(),
5.     routes:[
6.         {
7.             path:'/',
8.             component:HelloWorld,
9.         }
10.     ]
11. })
12. export default router;

复制代码

在main.js中添加路由

1. import { createApp } from 'vue'
2. import App from './App.vue'
3. import router from "@/router";
4. 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企服之家，中国第一个企服评测及商务社交产业平台。