Vue.js之路由（router）

 

目录

 

一、router简介

二、vue-router的基本使用

1.路由安装

2.创建路由组件

3.创建路由对象

4.在vm实例中注册路由对象

5.在html中使用路由展示

6.路由的重定向

7.选中路由高亮显示超链接

8.路由传参：使用query方式传递参数

9.路由传参：使用params方式传递参数

10.嵌套路由

---

一、router简介

在后端程序中，我们是使用的servlet或者springMVC来匹配前端的http请求，并响应相关的数据发送给前端。

在前端程序中，一个单应用程序，通过一个hash（#号）改变来切换页面的展示。

http://localhost:63342/mywebpack/index.html#/login
http://localhost:63342/mywebpack/index.html#/register

前端路由的优点在于，我们只是展示页面可以不需要通过http来请求后端响应，这样一定程度上减轻了服务器的压力，也减少了网络的请求。

关于#号的一些小常识：#号是用来指导浏览器动作的，#号后的字符是不会发送给服务端，同时也不会触发网页的重载，在通常使用的浏览器中#改变增加浏览器的访问历史，因此可以使用浏览器的后退，如果要将#号发送给服务端，需要转义为“%23”。

二、vue-router的基本使用

1.路由安装

   第一种是在html中引入<script src="vue-router.js">，由于vue-router依赖于vue，因此vue.js是必须要引入的并注意引入顺序，同时这种方式会自动安装路由并使用；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.js"></script>

    第二种是使用webpack构建工具来引入，cnpm i vue-router -D   ，引入后需要手动来安装   

cnpm i vue-router -D

import Vue from  'vue'
import VueRouter from  'vue-router'
//手动安装路由
Vue.use(VueRouter)

2.创建路由组件

//定义两个路由组件
var login = {
    template:"<h2>登录组件</h2>"
}

var register = {
    template:"<h2>注册组件</h2>"
}

3