VUE Router模块化的安装与使用

---

前言

VUE是目目前前端三大框架之一，今天我们主要说一下VUE中的路由跳转（VueRouter）模块化的安装与使用

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、路由跳转

优点

路由跳转，使我们现在网页中常用的一种跳转方式。它的优势在于无需刷新页面即可进行页面的跳转，仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。

缺点

使用浏览器的前进、后退键的时候会重新发送请求，没有合理地利用缓存

二、Vue Router的模块化安装及使用

https://router.vuejs.org/zh/installation.html
VueRouter官方网站

在VueRouter官方网站中三种安装使用方法，今天我们只说一下在模块化工程中的安装及使用。

1.安装

1）在项目的集成终端中安装VueRouter

npm install vue-router

2）在vscode中创建一个文件，文件中有一个js文件（该js文件主要存放路由的使用与其路由规则）

3）创建两个文件，这两个文件中为跳转的页面内容

就是在页面中随意的书写内容，以便能够看出效果。

2.在项目中使用

（1）引用VUE Router

在router文件js中引用VUE Router

代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
//使用vue路由
Vue.use(VueRouter)

并在该页面下方书写VUE Router路由规则，书写路由规则分为两步

1、创建规则
2、导出组件

//引入VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
//使用vue路由
Vue.use(VueRouter)

//导入组件
import Home from "../components/HelloWorld.vue";
import Profil from "../components/profil.vue"

//创建路由规则
const router = new VueRouter({
    routes:[
//{path:"/index",component:"../components/HelloWorld.vue"},
//也可以这样写，直接在后面加入你想要跳转页面的链接
        {path:"/index",component:Home},
        //component:Home中Home来自上文导入组件的名字
        {path:"/bar",component:Profil}
        //path后面的名字使我们自己取的，语法：/ + 名字
        //这个名字需要我们在下面引用
    ]
})

//将当前路由规则导出
export default router

（2）导入至main.js并使用

将路由模块导入main.js并使用

import router from './router/index.js'
//'./router/index.js'  为你创建文件的路径

new Vue({
  router//引用router
})

（3）在Html页面进行跳转

上面步骤准备完毕我们就可以准备进行路由跳转，在HTMl页面使用<router-link to=""></router-link>标签

 <div>
    <ul>
      <li>
      <router-link to="/index">首页</router-link>
      </li>
//to后面写入的是你存放路由规则页面也就是index.js页面中
//{path:"/index",component:Home} path后的名字
		<li>
      <router-link to="/bar">个人</router-link>
      </li>
    </ul>
    
    <div class="view">
      <router-view />
     </div>
      //<router-view />是页面内容的显示区域，必加，不然页面不会报错，但也没有效果
    
  </div>

（3）页面效果

在我们点击进行跳转时，我们的页面并没有进行全部的刷新，只是路径发生了改变

---

总结

这就是本篇的所有内容了，如有错误，欢迎评论指正。共勉~~