VueRouter 路由的安装与使用

最新推荐文章于 2024-04-29 22:22:14 发布

iGma_e

最新推荐文章于 2024-04-29 22:22:14 发布

阅读量759

点赞数

分类专栏： Vue 2020 文章标签： vue.js

本文链接：https://blog.csdn.net/Mr_peng13/article/details/110005895

版权

Vue 2020 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

一、什么是路由（router）

（一）定义

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

（二）路由器机制

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

二、前/后端渲染

（一）前端渲染

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

（二）后端渲染

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

（三）前端路由

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

（四）后端路由

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

三、SPA 相关技术

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

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

（一）使用 URL 的 hash

将创建好的项目运行在本地服务器上。指令：npm run serve
默认网址：localhost:8080（占用 8080 端口）
在控制台输入：location.hash = "home"
敲下回车后：
- 网址发生变化。
- 页面不刷新。

（二）使用 H5 的 history 模式

堆加（入栈）：history.pushState()
- history.pushState() 的存储方式与栈数据结构相似。
- 在控制台输入：history.pushState({}, '', 'home')
- 按下回车后，路径发生变化，页面不刷新。
出栈：history.back()
- history.back() 取出最后一次入栈的 URL
- 在控制台输入：history.back()
- 按下回车后，返回上一层页面，页面不刷新。
关闭其他页面，跳转到指定路径：history.replaceState()
- 使用 history.replaceState 跳转页面时，其他页面全部关闭，且不能返回上一以面。
- 在控制台输入：history.replaceState({}, '', 'home')
- 按下回车，路径放生变化，且不能返回上一页面。
history.go() 跳转到指定页面
- 只有使用 history.pushState() 后方可使用 history.go()
- 参数为负数时表示向前跳转，为整数时表示向后跳转。
- 向前跳转一页：
- 向前跳转两页：
- 向后跳转三页：

四、vue-router

（一）安装 vue-router

若在使用脚手架创建项目时已勾选 Router 选项（建议勾选），则无需安装。
指令：npm install vue-router –save
安装完成后，打开项目根目录中的 package.json 文件，在文件中可以查看路由的版本号。

（二）配置路由

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

（三）系统创建路由

利用脚手架创建项目时，勾选 Runter 选项。
创建项目后，项目的 src 目录中会出现 router 和 views 文件夹。
router -> index.js 文件负责配置前端路由。
views 文件夹中，每一个 .vue 文件代标一个页面的跟组件。About.vue 和 Home.vue 是系统默认创建的。

修改 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

简化 Home.vue 文件

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

<script>
export default {

}
</script>

<style>

</style>

简化 About.vue 文件

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

<script>
export default {

}
</script>

<style>

</style>

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

五、CSDN 导航案例

（一）需求

在这里插入图片描述

（二）设计过程

删除原文件夹中的 Home.vue 和 About.vue 文件。
在 views 文件夹中创建新文件。

编辑所有 vue 文件。

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

<script>
export default {

}
</script>

<style>
    
</style>

配置 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

编辑 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
评论
VueRouter 路由的安装与使用

一、什么是路由（router）（一）定义路由是一个网络工程学中的术语。路由就是通过互联网的网络把信息从源地址传输到目的地址的活动。（二）路由器机制路由：决定数据包从来源到目的地的路径。传送：将输入端的数据转移到合适的输出端。二、前/后端渲染（一）前端渲染首先由用户在浏览器的地址栏中输入域名。浏览器将 URL 发送到静态资源服务器。根据 URL 从静态资源服务器获取相关 HTML+CSS 代码。浏览器将 HTML+CSS 代码渲染到页面中。浏览器执行 JS
复制链接

扫一扫