路由

179 阅读1分钟

1.路由?

Vue中的路由:SPA(single page application)单页应用程序的路径管理。 vue-router是vue.js官方的路由插件,用于构建单页面应用。vue的单页面应用是基于路由和组建的,设定访问路径,并将路径和组件映射起来。在vue-router 单页面应用中,路径之间的切换,就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。

vue2.0创建步骤:

1.首先安装vue-router的时候需要确定版本。vue2.0采用的vue-router版本为@^3.5.1

vue2.0安装方式:npm i vue-router@^3.5.1 -s

vue3.0直接安装方式:npm i vue-router -s

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

image.png

image.png

image.png

vue3.0中的路由创建步骤:

  1. 创建对应的文件夹router 创建 index.js文件,
  2. 安装vue-router (vue3.0直接安装就行)
  3. 导入createRouter 和 createWebHashHistory
  4. 配置routes
  5. 使用createRouter注册routes和配置路由模式
  6. 导出路由
  7. 在main.js中 导入router ,并通过链式 .use(router) 注册

image.png

image.png

image.png