Vue的路由

啥是Vue路由

刚看到这个名字很迷惑,以为是路由器
路由是一个网路工程的术语
**路由(routing)**就是通过互联的网路把信息从原地址传输到目的地地址的活动—维基百科

简单理解就是将信息从一个地方转到另外一个地方

路由器提供两种机制:路由和传送

• 路由是决定数据包从来源到目的地的路径
• 转送将输入端的数据转移到合适的输出端
  一进一出,数据进来,给到路由器,路由器根据路由表,找到mac地址,然后根据mac地址绑定的内网ip,传送到终端

路由好处都有啥?世界人民都用它?

在前几年后端分离模式之后,现在开始升级到了spa页面

单页面,富应用,整个网页就只有一个html页面辣

哈?一个网页?那怎么实现多页面呢
原其实理就是从服务器下载完全,然后执行部分html + css + js,而不是写好几个 html + css + js放在静态服务器

比如当你需要打开多个页面时

url:abc/home
url:abc/ablut

• 放在老早以前,静态服务器需要放两套html + css + js,当你打开某个页面,就从服务器请求加载该页面.
• 而单页面,富应用.只需要从静态服务器请求一套html + css + js.当你需要打开某个子页面时,前端路由会帮助我们从总文件上抽取一部分,放到浏览器里加载(反正Vue把所以js都打包到一个js文件里了)
• 其实这就是Vue中的各个组件
• spa需要路由来支撑

前端路由的核心

• 改变url,整个页面不刷新
• 那么问题来了,怎样实现改变url,整个页面不刷新呢?

改变url,整个页面不刷新的方法

第一种

• 在url后面增加hash(url:abc/#/aaa)
• url的hash也就是锚点,本质上是改变window.location的href属性
• 可以通过直接复制location,hash来改变hash,页面不会刷新
  第二种
• 使用html5中的history模式: pushState
• history.pushState( data , title , ?url)
• history.go(-1) = history.back()返回上一个网页
• history.go(1) = history.forward前进网页
  以上就是路由的一些基本原理

Vue中的路由

使用vue路由组件,需要四步

• 安装vue router

npm install --save vue-router

• 引用vue router

import Vue from 'vue'//引用vue组件来使用vue.use
import Router from 'vue-router'//引用路由组件
Vue.use(router)//使用路由组建,

• 配置路由文件
  在router的indexjs文件中配置

var rt = new router({
routes:[{
path:'/',//指定要跳转的路径
component:HelloWorld//指定要跳转的组件
}]
export default {rt} //以自定义模块方式导出组件

• vue实例中挂载router

import router from './router' //导出
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

• 确定挂载位置

<router-link to='/xxx'></router-link>
<router-view></router-view>

<router-link>的各项属性

to='/xxx'

映射组件的路径

tag='xxx'

默认 <router-link>是a链接,tag可以改变标签属性,例如div,button

replace

改变默认的history:pushState()为history:replace
也可以自定义标签,添加事件,然后使用方法:this.$router.replace(路径)

active-class="xxx"

自定义<router-link>默认的类

自定义<router-link>的方法

使用<div @click= " function(){}" > </div>自定义
然后在methods中定义方法, 设置$router.push()

如果是不动态绑定,只转到固定页面

toIndex(){
this.$router.push('/xxx')//等于<route-link to="/xxx"></route-link>
    }

如果是动态绑定,那么就要传递参数
我自己项目的例子:
parmas是必须的

    toArticle(item){
      this.$router.push({
        name:'Article',
        params:{
        id:item.id//动态绑定路由中,名为Article组件的路径上的id,并赋值为item.id
        }

<router-view>的属性

大家都知道,在route文件夹下的index中可以配置路由组件,然后通过<router-view>摆放组件的位置
一般情况下,都是

• 先配置好路由组件,在父页面设置<router-view>,然后在路由配置文件配置组件路径
• 当网址为父页面的路径+组件的路径时,父页面通过<router-view>展示组件

但是,当一个路径页面,需要加载多个组件时

哪个<router-view>显示正确的组件呢?
这个时候,可以在路由配置一个页面多个组件,然后在<router-view>上添加name属性来对应

routes: [
    {
      name:'OnePage',
      path:'/',
      components: {
      //在跟页面上路由两个组件,分别命名为head和main
      	head: Head	,
	    main: Main
      }
    }
]
//在父页面通过<router-view>的name属性来显示对应组件

<router-view>的name属性

这样一来,通过<router-view>添加name的方式,来确定组件的位置

<router-view name="head"></router-view>
<router-view name="main"></router-view>