Vue的路由配置(Vue2和Vue3的路由配置)
系列文章目录
Tips:使用Vue3开发项目已经有一段时间了,关于Vue2的路由是如何一步一步搭建的都快要忘记了,今天写着篇文章主要就是回顾一下,在Vue2和Vue3中我们是如何一步一步的配置路由的。
提示:最好的进步就是有闲暇时间就敲一敲代码!!!!!
文章目录
- 系列文章目录
- 一、路由是什么?
- 二、Vue2中路由的创建步骤
- 1.安装正确的路由版本(这里我踩坑了)
- 2.vue2中配置路由的步骤
- 步骤如下:
- 代码如下图所示
- 如下图所示:
- 三、Vue3中路由的创建步骤
- 1.步骤如下
- 代码如下图所示
- 如下图所示:
一、路由是什么?
Vue
中的路由就是.SPA(single page application 单页应用程序)
的路径管理器。
vue-router
是Vue.js官方的路由插件,用于构建单页面应用。vue的单页面应用是基于路由
和组件
的,设定访问路径,并将路径和组件映射起来
。在vue-router单页面应用中,路径之间的切换,就是组件的切换
。路由模块的本质就是建立起url和页面之间的映射关系。
二、Vue2中路由的创建步骤
1.安装正确的路由版本(这里我踩坑了)
1.首先安装vue-router的时候需要确定版本。 Vue2.0采用的 vue-router 版本为 @^3.5.1
npm i vue-router@^3.5.1 -s // Vue2安装的方式
2.直接 npm i vue-router -s 这种方式安装会安装最新版本(适用于Vue3)
npm i vue-router -s //Vue3安装的方式
2.vue2中配置路由的步骤
步骤如下:
1.安装 vue-router@3.5.1
2.创建 router文件夹 并创建 index.js
3.引入VueRouter 和 Vue
4.Vue.use(VueRouter)
5.创建VueRouter实例: const router = new VueRouter({ routes})
6.配置routes (结构如下图所示)
7.导出router
8. 在main.js中导入刚才的 router
9.注册router
10.创建 router-link 和 router-view
代码如下图所示
路由文件代码:
//1.导入VueRouter
import Vue from "vue";
import VueRouter from 'vue-router'
import HelloWord from "../components/HelloWorld.vue";
//2.使用路由
Vue.use(VueRouter);
//3.创建VueRouter的实例
const router = new VueRouter({//tips:不想要 #(锚点)就添加下面代码mode:'history' //4.配置路由的path和组件routes :[{path: "/",name:'home',component: HelloWord,},{path: "/about",name:'anout',component: () => import("../components/About.vue"),},]
})
//5.导入路由实例
export default router
入口文件代码:
import Vue from 'vue'
import App from './App.vue'
//6.引入导出的路由
import router from './router/index'Vue.config.productionTip = falsenew Vue({//7.注册路由router,render: h => h(App),
}).$mount('#app')
如下图所示:
三、Vue3中路由的创建步骤
1.步骤如下
1. 创建对应的文件夹router 创建 index.js文件,
2. 安装vue-router (vue3.0直接安装就行)
3. 导入createRouter 和 createWebHashHistory
4. 配置routes
5. 使用createRouter注册routes和配置路由模式
6. 导出路由
7. 在main.js中 导入router ,并通过链式 .use(router) 注册
代码如下图所示
路由文件代码:
import { createRouter, createWebHashHistory } from "vue-router";import HelloWord from '../components/HelloWorld.vue'const router = createRouter({history: createWebHashHistory(),routes: [{path: "/",component:HelloWord},{path:"/about",component:() => import("../components/About.vue")}],
});export default router
入口文件代码:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')
如下图所示:
Vue的路由配置(Vue2和Vue3的路由配置)相关推荐
- vue2 和 vue3 的 路由守卫
vue2 路由守卫: vue-router 路由实现: 路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能. 首先知道有3个参数 to , ...
- Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录 一.VueJS是什么? 二.Vue的优缺点 三.MVVM 数据双向绑定 四.Vue的安装和使用 五.Vue模板语法-文本渲染 六.常用的vue的指令 一.VueJS是什么? 它是一个轻量级MVV ...
- VsCode Vue 快捷键生成代码模板(Vue2、Vue3)
VsCode一些相关设置 然后打开vue.json 打开之后将我下面的代码拷贝过去就可以(可以自定义修改) {"Print to v2": {"prefix": ...
- 自己实现vue双向绑定从vue2到vue3
在Vue3中,最重要也更为人所知的就是ES6的Proxy. Proxy不仅消除了Vue2中现有的限制(比如对象新属性的增加.数组元素的直接修改不会触发响应式机制,这也是很多新手以为所谓的bug),而且 ...
- 【Vue】菜头学前端 - vue3学习笔记
目录 简介 一.创建项目 1.使用vue-clli创建 2.使用Vite创建 二.Composition API(组合式API) 1.setup函数 2.ref函数和reactive函数 1.ref函 ...
- Vue2 环境下安装Vue3 ,同一台电脑同时安装vue2 和vue3
目前大多数老的项目还是以vue2.0版本为主,在vue3的环境下vue2的项目又不能运行,因此Vue2 和Vue3两个版本同时存在显得尤为重要,本博客为转发博客,非常详细 博客1:https://bl ...
- 微前端之实现方式和项目分析、实践主子应用启动配置、vue2、vue3、react15、react16 子应用的配置
一.微前端之实现方式和项目分析 微前端实现方式对比,如下所示: Iframe,Iframe 的优势是技术成熟,支持页面嵌入,天然支持运行沙箱隔离.独立运行.Iframe 的劣势是页面之间可以是不同的域 ...
- [Vue]学习笔记目录 【Vue2与Vue3完结】 (尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通)
文章目录 前言 遇见的问题及其解决方案 之前笔记 Vue2 Vue3 前言 本笔记根据如下笔记和视频进行整理 老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8 ...
- vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解
一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入v ...
最新文章
- 机器学习必知必会10大算法
- Linux下crontab命令的用法
- Jenkins在AWS上(第1部分)
- perl python ruby_perl,lua,python,ruby的对比(3) -- lambda,closure,proper tail function call
- laravel本地项目上传服务器,laravel 上传本地文件到服务器
- Android RxJava2 浅析
- 自己写的微信小程序炸金花简单版
- 广数数控系统数据采集方案
- TDDL分布式数据库
- 老司机必备-安卓+PC磁链下载播放工具
- RationalDMIS 2020 SP25扫描测头构建与校验(山涧果子)
- TS在前端发展的当前形式(愚见)
- 虚幻4游戏开发_4_导入fbx和编辑
- 字体设计中什么是断笔设计啊
- Vue中使用Tinymce-edtio
- sklearn.svm中LinearSVR(svm线性回归)、LinearSVC(svm线性分类)与SVC(svm分类)、SVR(svm回归)之间的区别
- format函数用法详解
- (转)数学中的各种空间
- JVE非我烟弹降价40%,电子烟价格革命真的来了
- 《30天自制操作系统》读书笔记(2)hello, world