啥是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>