Vue-router前端路由(1)

什么是路由？

路由就是通过互联的网络把信息从源地址传送到目的地址的活动

路由提供了两种机制：路由和传送

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

路由中有一个非常重要的概念叫路由表：

• 路由表本质上就是一个映射表，决定了数据包的指向

网站的发展阶段：

后端路由阶段：

早期的网站开发整个HTML页面是由后端服务器来渲染的

• 服务器直接产生渲染好的HTML页面，返回给客户端进行展示

但是，一个网站这么多页面服务器应该如何处理呢？

• 一个页面有自己对应的网址，也就是URL
• URL会发送到服务器，服务器会通过正则对该URL进行匹配。并且最后交给一个Controller进行处理
• Controller进行各种处理，最终生成HTML或者数据，返回给前端
• 这就完成了一个IO操作

后端路由的缺点：

• 一种情况是整个页面的模块都是由后端人员来编写和维护的
• 另一种情况就是前端开发人员如果要开发页面，需要通过PHP和Java等语言来编写页面代码
• 而通常情况下HTML代码和数据以及对应的逻辑会混在一起，编写和维护起来都是件很糟糕的事情

前后端分离阶段：

• 随着Ajax的出现，有了前后端分离的开发模式
• 后端只提供API来返回数据，前端通过Ajax来获取数据，并且可以通过JavaScript将数据渲染到页面中
• 这样做的最大优点就是后端负责的清晰，后端专注于数据上，前端专注于交互和可视化上
• 并且当移动端出现后，后端不需要进行任何处理，依然使用之前的一套API即可

单页面富应用阶段（前端路由）：

• 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
• 也就是前端来维护一套路由规则

Vue-router插件：

当然我i们的重点是Vue-router：

• vue-router是Vue.js官网的路由插件，它和Vue.js是深度集成的，适合用于构建单页面应用

vue-router是基于路由和组件的

• 路由用于设定访问路径，将路径和组件映射起来
• 在vue-router的单页面应用中，页面的路径的改变实际上就是组件的切换

安装和使用vue-router：

步骤一：安装vue-router

npm install vue-router --save

步骤二：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）

• 第一步：导入路由对象，并调用Vue.use(VueRouter)
• 第二步：创建路由实例，并且传入路由映射配置
• 第三步：在Vue实例中挂载创建的路由实例

使用vue-router的步骤

• 第一步：创建路由组件
• 第二步：配置路由映射：组件和路径的映射关系
• 第三步：使用路由通过和

:该标签是一个已经在vue-router中已经内置了的组件，他会被渲染成一个a标签

该标签会根据当前的路径，动态渲染出不同的组件

Url的hash和history

• Url的hash

  • url的hash也就是锚点（#），本质上是改变window.location的href属性
  • 我峨嵋你可以通过直接复制location.hash来改变href，但是页面不发生刷新

• HTML5的history模式：pushState()

HTML5的history.pushState()非常类似个栈结构,没pushState({},,‘XXX‘)一次，就类似于往栈例压入一个路径，用back()返回上一个路径。

如果希望当前页面改变路径后无法返回，可以用replaceState()

vue-router路由器的重定向

const routes = [
  { path: ‘/‘,
  //重定向
    redirect:  ‘/home‘
  }
 ]

修改为HTML history模式

const router = new VueRouter({
  routes,
  mode: ‘history‘
});

router-link其他属性的补充：

• tag:tag可以指定之后渲染什么组件，比如下面的代码会被渲染成一个

• 元素而不是

• .router-link-exact-active class类：在router-link被点击后切换的样式

• linkActiveClass:当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置linkActiveClass可以修改默认名字

  • 一般在进行高亮显示或者底部tabber会用到此类。
  • 但是通常不会修改类的属性，会直接使用默认的router-link-active

通过代码格式跳转路由：

使用this.$router.push(‘跳转路由‘)

<script>
export default {
    name: "App",
    methods: {
      homeClick(){
        //通过代码的方式修改vue-router
        this.$router.push(‘/home‘)
        console.log(‘homeclick‘)
      },
      aboutClick(){
        this.$router.push(‘/about‘)
        console.log(‘aboutclick‘)
      }
    }
}
</script>

动态路由的使用：

• 通过动态绑定：v-bind的方法，路由跳转的时候在路径上拼接上Id

路由配置：

route:[
  {
    path: "/user/:id",
    component: User
  }
]

渲染界面路由的动态绑定：（用字符串拼接方法填写路径）

<router-link :to="‘/user/‘+id">用户</router-link>

现在有一个需求，如果渲染界面的路由跳转到用户界面并在路径显示了渲染界面里的id数据，那么渲染组件中如何再在界面上返回我们需要的在渲染界面下的用户id数据呢？

$router:获取当前整个路由对象

$route：获取当前活跃路由（界面显示的组件对应的路由）

在User组件下定义computed获取当前活跃路由获取到的id参数：

<template>
  <div>
      <h2>我是用户界面</h2>
      <p>我是用户界面内容</p>
      <p>userId: {{userId}}</p>
      <!--<p>{{$route.params.id}}</p>-->
  </div>
</template>

<script>
export default {
    name: "User",
    computed: {
      userId(){
        return this.$route.params.id
      }
    }
}
</script>

Vue-router懒加载的使用

• 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块
• 只有在这个路由被访问到的时候，才加载对应的组件

const Home = () => import("../components/Home.vue");
const About = () => import("../components/About.vue");
const User = () => import("../components/User.vue");

Vue.use(VueRouter);

const routes = [
  { path: ‘/‘,
  //重定向,页面初始定位到Home组件
    redirect:  ‘/home‘
  },

  {
    path: "/home",
    component: Home
  },
  {
    path: "/about",
    component: About
  },
  {
    path: "/user/:id",
    component: User
  }
];

Vue-router路由的嵌套:

嵌套路由是一个很常见的功能：

• 比如在home页面中，我们希望通过home/news和/home/message访问一些内容
• 一个路由映射一个组件，访问这两个路径也会分别渲染两个组件

实现嵌套路由有两个步骤：

• 创建对应的子组件，并且在路由映射中配置对应的子路由
• 在组件内部使用标签

Vue-router参数传递：

参数传递主要有两种类型：

• params类型：

• 配置路由格式：/route/：id
• 传递的方式：在path后面接上对应的值
• 传递后形成的路径：/route/123 /route/abc

路由显示里传参方式：

<!--id为当前组件下数据-->
<router-link :to="‘/user/‘+id">用户</router-link>

路由映射组件内获取数据：

<p>userId: {{$route.params.id}}</p>

URL => 协议：//主机：端口/路径?查询

? scheme://host:port/path?query#fragment

• query类型：

• 配置路由格式：/route，也就是普通配置
• 传递的方式：对象中使用query的key作为传递方式
• 传递后形成的路径：/route？id=123, /route？id=abc

路由显示里传参方式：

<router-link :to="{ path:‘/profile‘, query:{name: ‘豆豆‘, height: ‘180‘, age: ‘21‘}}">

路由映射组件内获取数据：

<p>姓名:{{$route.query.name}}</p>