VueRouter 路由的安装与使用

最新推荐文章于 2024-04-29 22:22:14 发布
最新推荐文章于 2024-04-29 22:22:14 发布
阅读量760 收藏 1
点赞数
分类专栏： Vue 2020 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_peng13/article/details/110005895
版权

上一篇：VueCLI 脚手架的安装与使用

一、什么是路由（router）

（一）定义

  1. 路由是一个网络工程学中的术语。
  2. 路由就是通过互联网的网络把信息从源地址传输到目的地址的活动。

（二）路由器机制

  1. 路由：决定数据包从来源到目的地的路径。
  2. 传送：将输入端的数据转移到合适的输出端。

二、前/后端渲染

（一）前端渲染

  1. 首先由用户在浏览器的地址栏中输入域名。
  2. 浏览器将 URL 发送到静态资源服务器。
  3. 根据 URL 从静态资源服务器获取相关 HTML+CSS 代码。
  4. 浏览器将 HTML+CSS 代码渲染到页面中。
  5. 浏览器执行 JS 代码，通过 Ajax 请求提供 API 接口的服务器，获取数据。
  6. 获取数据后，利用 JS 将数据渲染到浏览器中。

（二）后端渲染

  1. 首先由用户在浏览器的地址栏中输入域名。
  2. 浏览器将域名发送到服务器。
  3. 服务器内部对域名进行解析。
  4. 利用 Java / PHP 等技术从数据库中读取数据，并将数据动态的放到页面上。
  5. 将生成的页面直接返给浏览器。

（三）前端路由

  1. SPA（单页面富应用技术）
    • 根据 URL 向静态资源服务器发起请求，获取页面资源。
    • 此时静态资源服务器将所有数据返回，只有一个HTML、一个CSS、一个JS文件。
    • SPA 主要的特点就是在前后端分离的基础上加了一层前端路由。
  2. 前端路由
    • 分配页面，将资源服务器返回的 HTML、CSS、JS 文件划分为多个组件。
    • 访问不同的 URL 渲染不同的页面。

（四）后端路由

  1. 定义：后端处理 URL 与页面之间的映射关系。
  2. 缺点：
    • 整个页面的模块都是由后端人员来编写和维护。
    • 前端开发人员要想开发页面，需要通过 PHP 和 Java 等语言来编写页面代码。
    • HTML 代码和数据以及对应的逻辑会混在一起。

三、SPA 相关技术

使用 SPA 时，对浏览器有一个要求，在修改 URL 时页面不进行刷新。实现这一效果有以下两种方式：

  • 使用 URL 的 hash
  • 使用 H5 的 history 模式

（一）使用 URL 的 hash

  1. 将创建好的项目运行在本地服务器上。指令：npm run serve

    在这里插入图片描述

  2. 默认网址：localhost:8080（占用 8080 端口）

  3. 在控制台输入：location.hash = "home"

  4. 敲下回车后：

    在这里插入图片描述

    • 网址发生变化。
    • 页面不刷新。

（二）使用 H5 的 history 模式

  1. 堆加（入栈）：history.pushState()

    • history.pushState() 的存储方式与栈数据结构相似。

    • 在控制台输入：history.pushState({}, '', 'home')

    • 按下回车后，路径发生变化，页面不刷新。

      在这里插入图片描述

  2. 出栈：history.back()

    • history.back() 取出最后一次入栈的 URL

    • 在控制台输入：history.back()

    • 按下回车后，返回上一层页面，页面不刷新。

      在这里插入图片描述

  3. 关闭其他页面，跳转到指定路径：history.replaceState()

    • 使用 history.replaceState 跳转页面时，其他页面全部关闭，且不能返回上一以面。

    • 在控制台输入：history.replaceState({}, '', 'home')

    • 按下回车，路径放生变化，且不能返回上一页面。

      在这里插入图片描述

  4. history.go() 跳转到指定页面

    • 只有使用 history.pushState() 后方可使用 history.go()

    • 参数为负数时表示向前跳转，为整数时表示向后跳转。

    • 向前跳转一页：

      在这里插入图片描述

    • 向前跳转两页：

      在这里插入图片描述

    • 向后跳转三页：

      在这里插入图片描述

四、vue-router

（一）安装 vue-router

  1. 若在使用脚手架创建项目时已勾选 Router 选项（建议勾选），则无需安装。

    在这里插入图片描述

  2. 指令：npm install vue-router –save

  3. 安装完成后，打开项目根目录中的 package.json 文件，在文件中可以查看路由的版本号。

    在这里插入图片描述

（二）配置路由

  1. 在 src 目录中创建 router 目录，在目录中创建 index.js 文件。
  2. 在 index.js 文件中导入 vue-router 对象。
  3. 通过 Vue.use(插件) 安装插件。
  4. 创建 Router 对象。
  5. 在 routes 中配置路由，页面与 URL 之间的关系。
  6. 抛出路由接口。

（三）系统创建路由

  1. 利用脚手架创建项目时，勾选 Runter 选项。

    在这里插入图片描述

  2. 创建项目后，项目的 src 目录中会出现 router 和 views 文件夹。

    在这里插入图片描述

  3. router -> index.js 文件负责配置前端路由。

  4. views 文件夹中，每一个 .vue 文件代标一个页面的跟组件。About.vue 和 Home.vue 是系统默认创建的。

  5. 修改 router -> index.js 文件（将文件中的注释部分删掉）

    import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

  6. 简化 Home.vue 文件

    <template>
  <div class="home">
    <h2>我是 Home 首页</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

  7. 简化 About.vue 文件

    <template>
  <div class="about">
    <h2>我是 About 关于页面</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

  8. 控制台输入指令，npm run serve 运行程序

    在这里插入图片描述

    在这里插入图片描述

五、CSDN 导航案例

（一）需求

在这里插入图片描述

（二）设计过程

  1. 删除原文件夹中的 Home.vue 和 About.vue 文件。

  2. 在 views 文件夹中创建新文件。

    在这里插入图片描述

  3. 编辑所有 vue 文件。

    <template>
    <div class="screen">
        <h2>文章</h2>
    </div>
</template>

<script>
export default {

}
</script>

<style>
    
</style>

  4. 配置 router -> index.js 文件。

    import { createRouter, createWebHistory } from 'vue-router'
import Article from '../views/article.vue'
import College from '../views/college.vue'
import Download from '../views/download.vue'
import Forum from '../views/forum.vue'
import Problem from '../views/problem.vue'
import Code from '../views/code.vue'
import Recruit from '../views/recruit.vue'
import Book from '../views/book.vue'
import Vip from '../views/vip.vue'

const routes = [
  {
    path: '/article',
    name: 'article',
    component: Article
  },
  {
    path: '/college',
    name: 'College',
    component: College
  },
  {
    path: '/download',
    name: 'Download',
    component: Download
  },
  {
    path: '/forum',
    name: 'Forum',
    component: Forum
  },
  {
    path: '/problem',
    name: 'Problem',
    component: Problem
  },
  {
    path: '/code',
    name: 'Code',
    component: Code
  },
  {
    path: '/recruit',
    name: 'Recruit',
    component: Recruit
  },
  {
    path: '/book',
    name: 'Book',
    component: Book
  },
  {
    path: '/vip',
    name: 'Vip',
    component: Vip
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

  5. 编辑 App.vue 文件。

    <template>
  <div id="app">
    <div id="nav">
      <ul>
        <li v-for="item in navList" :key="(item,index)">
          <router-link :to="item.to">{{item.name}}</router-link>
        </li>
      </ul>
    </div>    
    <router-view class="view"/>
  </div>
</template>

<script>
export default {
  data()
  {
    return {
      navList:[
        {to:"article",name:"博文"},
        {to:"college",name:"学院"},
        {to:"download",name:"下载"},
        {to:"forum",name:"论坛"},
        {to:"problem",name:"问答"},
        {to:"code",name:"代码"},
        {to:"recruit",name:"招聘"},
        {to:"book",name:"电子书"},
        {to:"vip",name:"VIP"},
      ]
    }
  }
}
</script>

<style>
*
{
  margin: 0px;
  padding: 0px;
}
body
{
  background-color: #d0d0d1;
}
#nav
{
  width: 720px;
  height: 40px;
  margin: auto;
}
#nav ul
{
  width: 100%;
  height: 100%;
  background-color: white;
  clear: left;
}
#nav li
{
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  list-style: none;
  float: left;
}
#nav li:hover
{
  background-color: #008f88;
}
#nav li:hover a
{
  display: block;
  width: 100%;
  height: 100%;
  color: white;
}
#nav li a
{
  text-decoration: none;
  color: black;
}
.view
{
  width: 1200px;
  height: 600px;
  margin: auto;
  text-align: center;
  line-height: 600px;
  font-size: 50px;
  margin-top: 10px;
  background-color: white;
  border-radius: 20px;
}
</style>

（三）运行效果

请添加图片描述

请添加图片描述

iGma_e
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue Router前端路由的安装及介绍
JJJJ的博客
08-12 249
1.什么是前端路由： 一.前端路由管理所有的url映射及数据的传递， 显示数据时不会进行页面的刷新 用户体验来说会有相当大的提升。 二.详细步骤（搭建）： 一、通过脚手架创建vue项目 二、运行命令：npm install vue-router --save 查看package.json文件的dependencies属性是否添加vue-router 三、在src下新增文件：router 1.创建js文件：index.js(配置路由信息) 2.导入vue-router：import vueRouter fr
Vue router的安装和使用
Yilme的博客
07-24 2354
Vue router 1、安装：npm install vue-router或cnpm install vue-router或yarn add vue-router node里面出现vue-router则安装成功 2.在src里面新建一个router.js ，并引用如下代码 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 3.在src中新建view文件夹，在view新建例如：Home文件夹，在文件夹
vue-router的安装和使用
CSSAJBQ_的博客
11-23 7510
第一步：导入路由对象，并且调用Vue.use(VueRouter)第三步：使用路由:通过< router-view >推荐安装稳定版本 vue-router@3.5.2。第二步：创建路由实例，并且传入路由映射配置。第三步：在Vue实例中挂载创建的路由实例。第二步：配置路由映射：组件和路径映射关系。vue create 项目名称（英文）第一步：创建路由组件。
Vue 安装 Vue-router 路由安装以及使用
xiaowude_boke的博客
07-18 3810
Vue-router 路由安装以及使用
Vue Router的安装与基本使用方法
最新发布
qq_40930841的博客
04-29 740
一、了解为何使用路由•具体使用示例：网易云音乐•单页面应用(SPA)：所有功能在一个html页面上实现•前端路由作用：实现业务场景切换（一个路由路径对应一个组件）•优点：整体不刷新页面，用户体验更好，数据传递容易，开发效率高。•缺点：首次加载（要加载所有的静态资源）会比较慢一点。1.vue-router模块yarn。
Vue Router安装使用教程
weixin_43749805的博客
05-09 926
Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。
vue-router安装和使用
cqzdmm的博客
02-08 4394
vue-router安装和使用
Vue路由
qq_57420582的博客
09-13 2063
Vue路由
22_VueRouter路由使用.pdf
10-07
VueRouter路由使用.pdf VueRouter是Vue.js的官方路由，它与Vue.js核心深度集成，让用Vue.js构建单页应用变得非常容易。Vue Router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来。在VueRouter的...
vue router 配置路由的方法
10-18
3. **配置路由规则**：通过 `VueRouter` 构造函数创建一个路由实例，传入一个 `routes` 数组，数组中每个对象代表一个路由规则，包含 `path` 和 `component` 属性。`path` 是 URL 哈希值，`component` 是对应显示的...
vueRouter路由详解：从入门到精通
01-08
Vue-Router 什么是路由？ 路由是根据不同的url地址展现不同的内容或页面。早期的路由都是后端直接根据url来重载页面实现的，即后端控制路由。...安装路由 npm install vue-router 使用路由 引入路由 impor
vue router路由嵌套不显示问题的解决方法
08-30
主要为大家详细介绍了vue router路由嵌套不显示的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下vue-router 路由嵌套不显示问题
vue router2.0二级路由的简单使用
08-30
Vue Router 2.0 二级路由的简单使用 Vue Router 是一个基于 Vue.js 的路由插件，能够帮助开发者快速搭建单页应用程序。今天，我们将详细介绍 Vue Router 2.0 的二级路由的简单使用。 什么是二级路由？ 在 Vue ...
Vue Router的安装使用
W2398439780的博客
10-26 1350
在需要创建项目的文件夹路径中输入cmd即可直接打开来到该路径下的cmd窗口，vue create 创建项目。router link标签中 to给的path就是下面routes中对象的path。设置为插件，new一个VueRouter 并指定path对应的组件，导出。在src包下建一个router包，router包下建一个 js 文件。在根组件App中用 router link 标签声明路由链接。当然你也可以选择vue3 搭配 vue router4使用。
Vue路由（router）的安装和使用
weixin_47957908的博客
10-31 2652
Vue路由（router）的安装和使用。
Vue-router的引入和安装
Lzysnd的博客
03-02 3161
Vue-router的引入和安装
vue3安装路由（router）
m0_68716504的博客
10-30 2087
此时：路由就配置好了，路由的默认跳转就可以了，项目启动之后，就会跳转到第二步骤配置的home页面。vue3需要安装4.0以上版本。vue2最好安装4.0以下版本。安装完成后，可在package.json中查看。1.安装vue-router。
vue路由及打包部署
m0_61598337的博客
08-20 582
路由表主要记录hash（#号）与组件之间的对应关系。主要定义在router文件夹下的index.js},routes})若path值为/emp，则绑定的是../views/tlias/EmpView.vue，即为一条路由信息。Vue.use(VueRouter)使用vue路由，const routes = [{}]构建路由表，const router = new VueRouter({})实例化路由表对象。
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
vue router路由
10-12
关于Vue Router路由，它是Vue.js官方提供的路由管理器，可以实现单页应用中的页面跳转、参数传递、路由拦截等功能。 Vue Router的使用步骤如下： 1. 安装Vue Router：可以通过npm或yarn进行安装。 2. 在Vue项目中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iGma_e

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值