路由解决的问题

什么是路由（这里不要死抠字眼，尝试从字面上理解，只是一个名词而已，重点是理解名词代表的技术解决什么问题）？生活中最能体现路由功能的是路由器，路由器的作用：互联网中的计算机，必须要通过路由器根据目标机器ip地址，将数据转发到目标机器。

路由的作用：根据请求的地址，将请求转发到匹配的组件上。

后端路由

传统的网站大多数是多页面的，当我们点击一个超链接时，请求发送到服务端，由服务端根据请求路径匹配到不同的Controller，进行各种操作，最终将html或数据返回给前端。当然，目前绝大多数的网站都是这种后端路由，也就是多页面的。这样的好处有很多，比如页面可以在服务端渲染好直接返回给浏览器，不用等待前端加载任何js和css就可以直接显示网页内容，再比如对SEO的友好等。后端路由的缺点也是很明显的，就是模板是由后端来维护或改写的。前端开发者需要安装整套的后端服务，必要时还得学习像PHP或Java这些非前端语言来改写html结构，所以html和数据、逻辑混为一谈，维护起来既臃肿又麻烦。

前端路由

然后就有了前后端分离的开发模式，后端不再返回页面只提供API来返回数据，前端通过Ajax获取数据后，再用一定的方式渲染到页面里，这么做的优点就是前后端做的事情分得很清楚，后端专注在数据上，前端专注在交互和可视化上，如果今后再开发移动App，那就正好能使用一套API了。

随着前端技术的发展，前端功能越来越丰富，出现了大前端的概念，有了不少的单页面富应用。也就是在一个页面，可以使用到应用的所有功能。功能视图之前的切换，不再通过服务端完成，而是通过前端控制，这就是前端路由。

Vue中路由的作用

在Vue中一个功能视图就是一个组件，Vue中路由解决的就是在单页面中组件的显示切换问题。比如有这个一个页面，页面上有2个超链接（登录和注册），点击登录链接显示登录的表单，点击注册连接显示注册的表单。

第1个路由示例

1.页面引入 vue-router.js

<script type="text/javascript" src="js/vue-2.6.12.js"></script>
<!--注意引入顺序： vue-router.js 必须在vue.js之后引入 -->
<script type="text/javascript" src="js/vue-router-3.4.9.js"></script>

2.定义组件

const loginForm = {template:"#login-form"
}
const registerForm = {template:"#register-form"
}

3.创建 VueRouter对象，配置路由匹配规则

//router对象
var router = new VueRouter({routes:[{name:"login",//路由名称path:"/login",//路由路径component:loginForm//要路由到的组件},{name:"register",path:"/register",component:registerForm}]
});

4.向Vue实例中配置router

const vm = new Vue({el:"#app",//router:router //如果路由对象名也叫router，则可以省略:routerrouter
})

5.在页面上使用路由

<div id="app"><!-- 超链接的href必须以#开头 --><a href="#/login">登录</a><a href="#/register">注册</a><hr><!-- router-view是路由的锚点，也就是路由到的组件显示的地方 --><router-view></router-view>
</div>

router-link和redirect

router-link

router-link标签用于代替a标签，定义跳转超链接

<div id="app"><!-- 超链接的href必须以#开头 --><!--<a href="#/login">登录</a><a href="#/register">注册</a>--><!-- to属性配置跳转路径，不用添加#前缀 --><router-link to="/login">登录</router-link><router-link to="/register">注册</router-link><hr><!-- router-view是路由的锚点，也就是路由到的组件显示的地方 --><router-view></router-view>
</div>

redirect

redirect属性用在路由上，比如在a路由上配置redirect:b路由的路径，当访问a时会自动重定向到b。通常用于配置页面的默认路由地址

var router = new VueRouter({routes:[{name:"default",path:"/",redirect:"/login"},{name:"login",//路由名称path:"/login",//路由路径component:loginForm//要路由到的组件},{name:"register",path:"/register",component:registerForm}]
});

Vue第二部分(3)：路由 VueRouter相关推荐

Vue全家桶：路由 vue-router
文章目录 1. 什么是路由 1.1 概述 1.2 后端路由阶段 1.1 前端路由阶段 2. vue-router 2.1 安装 2.2 使用 2.3 模式 2.4 router-link.router ...
vue学习（八）vue2.0路由vue-router的简单入门使用
vue-router官网中文文档:Vue Router Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际上就是可以理 ...
Vue.js-Day05【安装路由（vue-router）、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.单页面应用 1.1.多页面应用 1.2.单页面应用 1.3.vue-router 2.安装vue-rout ...
在使用vue脚手架之前你必须掌握的:vue的模版以及路由用法
有的同学在学习中陷入了迷茫,在不清楚知识体系的情况下乱学一通,最后导致了基础会一点,后面的知识大概了解就是没法彻底掌握,所以在这里希望大家如果有陷入vue迷茫的小伙伴不要过早的使用vue脚手架先把 ...
【Vue知识点- No7.】路由、vant组件库的使用
No7.路由.vant组件库的使用学习目标 1.能够了解单页面应用概念和优缺点 2.能够掌握vue-router路由系统使用 3.能够掌握链接导航和编程式导航用法 4.能够掌握路由嵌套和路由守卫 5 ...
Vue Router：vue中实现前端路由
Vue Router 官方文档文章目录一.路由简介路由分类路由安装二.路由基本使用安装路由器并设置路由规则实现路由切换指定组件的呈现位置 this中的 $router 和 $route ...
使用vue-i18n切换中英文-网页语言切换案例-vue文件中或路由(Router)文件中使用
vue-i18n地址安装 npm install vue-i18n 使用在 main.js 中引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue- ...
四十三、在Vue使用router，路由的管理
@Author:Runsen @Date:2020/7/17 管理路由是一项必不可少的功能.今天,Runsen学习Vue Router. 文章目录安装Vue Router Vue Router使用 ...
【Vue.js 知识量化】vue-router 详解
vue-router 详解认识路由后端路由(了解) 前端路由 URL 的 hash HTML5 的 history 模式(5 种) vue-router 安装和使用 vue-router 路由的默 ...
vue cli3 搭建项目使用vue-router 以及 element-ui
搭建vue项目,(node和git 首先要下载) 1.首先根据vue官网 Cli的说明,快速搭建. cli3上的命令应该是: vue create 项目名称(之后可以一路回车) npm run ser ...

Vue第二部分(3)：路由 VueRouter