VUE-ROUTER：VUE路由的安装与使用

最新推荐文章于 2024-09-13 21:59:14 发布

算云烟

最新推荐文章于 2024-09-13 21:59:14 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zxcbnm7089/article/details/109789966

版权

本文详细介绍了Vue-Router的安装、路由模式、配置与使用，包括hash和history模式，以及如何创建、注册和配置路由。通过实例展示了<route-link>标签、编程式路由、路由传参和嵌套。还探讨了路由导航守卫的分类和参数，以及$router和$route对象的区别。对于构建单页面应用，Vue-Router提供了强大的路由管理功能。

摘要由CSDN通过智能技术生成

文章有参看其他博主文章：

原文：https://www.jianshu.com/p/5dff6811252d

vue-router导航守卫原文：

https://zhuanlan.zhihu.com/p/54112006，
https://segmentfault.com/a/1190000015727279

一、概述：

vue-router是vue官方推出的单页面路由管理器，让构建单页面应用变得易如反掌，页面之间的跳转更加灵活自由
vue-router实现原理：SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是:更新视图而不重新请求页面
官方教程：https://router.vuejs.org/zh/installation.html

二、路由的两种模式

vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式

1.hash模式：

随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容。但是这样存在一个问题，就是 url 每次变化的时候，都会造成页面的刷新。那解决问题的思路便是在改变url的情况下，保证页面的不刷新。在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于

http://www.xxx.com/#/login

这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：

function matchAndUpdate () {
   
   // todo 匹配 hash 做 dom 更新操作
}

window.addEventListener('hashchange', matchAndUpdate)

2.history模式：

14年后，因为HTML5标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有popstate事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了HTML5的实现，单页路由的url就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

function matchAndUpdate () {
   
   // todo 匹配路径 做 dom 更新操作
}

window.addEventListener('popstate', matchAndUpdate)

三、安装

1.方法一：

修改package.json描述文件，添加依赖后，使用npm install命令更新模块

"dependencies": {
   
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
}

2.方法二：使用命令

直接执行以下命令即可完成安装

npm install vue-router --save

3.方式三：初始化选择

在使用VUE-CLI脚手架创建项目时，选择Router即可，稍后创建项目成功后会自动配置好vue-router

四、使用搭建

如果没有使用脚手架自动安装vue-router，那么我们需要手动创建一些文件
项目结构如下：

在这里插入图片描述

1.创建js文件

创建一个js文件，文件名可以随意，这里取名为index.js，放在router文件夹里，代码如下

// 1.导入组件
import Vue from 'vue';
import VueRouter from 'vue-router';

// 2.使用VUE挂载vue-router
Vue.use(VueRouter);

// 3.创建路由对象并配置路由规则，mode指定模式，即文章开头提到的两种模式，可选值是hash和history,routes是一个数组，里面包含若干对象，用来指定映射组件
const router = new VueRouter({
   
    routes: [],
    mode: 'history'
});

// 4.导出vue_router，导出该对象后，方便再vue实例中组件此组件
export default router

2.向vue注册router组件

项目里一般有个main.js，作为vue实例存在的主要js文件，修改这个文件，完整代码如下

import Vue from 'vue'
import App from './App.vue'
// 1.导入这个组件
import router from './router'

Vue.config.productionTip = false

new Vue({
   
  // 挂载这个组件
  router,
  render: h => h(App)
}).$mount('#app')

到此为止，vue-router基本工作已经完成，下面需要修改页面，并创建几个组件进行测试使用

3.修改index.html

使用vue-cli脚手架创建的项目，在public文件下会有个index.html，这个就是主页面要显示的内容，一般一个项目有一个这样的html作为首页入口，其他vue组件可以加载于此

index.html内容如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong