路由是根据不同的url展示不同的内容,前端路由就是把这个工作由服务器转到前端来做。
Vue.js+Vue-router可以很简单的实现单页应用。
单页应用
单页应用(SPA)能够更新视图而不重新请求页面。
vue-router实现单页应用主要有Hash模式和History模式,通过mode参数决定使用哪一种。默认使用Hash。
1、Hash模式:
hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中也不会不包括#;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;
2、History模式:
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL,就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面;
安装
npm install vue-router
引入
在src中的main.js里引入:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//安装插件
配置路由
在router.js中配置路由
import Home from '@/component/home'
let router=new VueRouter({
routes:[
{
path:'/home',//就是router-link的to属性的值
component:Home
}
]
})
把路由对象传给Vue实例
在main.js中传实例
new Vue({
el: '#app',
//让vue知道我们的路由规则
router: router, //可以简写router
})
在App.vue中定义router-link和router-view
router-link会默认被渲染成一个a标签,支持用户在具有路由功能的应用中点击导航。
(vue1.0中只能通过给a标签设置v-bind的方式)
设置to的值为要连接的路由的路径
<router-link :to="{path:'/home'}"></router-link>
router-view路由匹配的组件渲染在这里
<router-view></router-view>
动态路由
主要用于点击列表项显示详情页的情景,页面结构基本相同,通过特定编号区分。
在一个路由中设置多个参数
在路径后面加上:id
path:'/home/:id'
通过params指定具体的参数
<router-link :to="{path:'/home',params:{id:1}}"></router-link>
参数值的读取
export default {
created () {
const homeID = this.$router.params.id
}
}
嵌套路由
利用children属性可以定义一个路由的子路由
子路由的路径不需要加/,会自动添加到路由的路径之后
routes:[
{
path:'/home',//就是router-link的to属性的值
component:Home,
children:[
{name:content,path:'content',component:Content}
]
}
]
其他
transition组件
vue2.0提供transition封装组件,实现一些组件的过渡效果。
transition只能有一个属性name,用于替换CSS类名中的v-
v-enter
: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
v-enter-active
: 定义进入过渡的结束状态。在元素被插入时生效,在transition/animation完成之后移除。
v-leave
:定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
v-leave-active
: 定义离开过渡的结束状态。在离开过渡被触发时生效,在transition/animation完成之后移除。
也只能有一个子元素,并且该子元素需要有v-if或v-show来控制是否显示。
<transition name="fade">
<p v-if="show">hello</p>
</transition>
导航的状态样式
用户点击任意一个标签组件时,组件会处于激活状态。
默认的组件激活状态类名为router-link-active
可以通过active-class来设置激活类名:
<router-link :to="{path:'/Home'}" active-class="active" ></router-link>
命名路由
有时通过name来标识一个路由可能会更方便
routes:[
{
path:'/home',
name:'home',
component:Home
}
]
链接到一个命名路由
<router-link :to="{ name: 'home'}"></router-link>
命名视图
有时想要在同时或者同级展示多个路由,就可以用命名视图,为界面创建多个视图出口。
<router-view name="a"></router-view>
<router-view name="b"></router-view>
在routes中的component里映射一下
routes:[
{
path:'/home',
name:'home',
component:{
a:Home,
b:Main
}
}
]
重定向与别名
重定向就是将网络请求重新定向到另一个URL,用于网页转移到新地址等场景。
在routes中配置:
routes:[
{path:'/a',redirect:'/b'}
]
别名就是给一个网页分配多个URL,无论访问哪一个URL得到的都是相同的网页。
和重定向不同在于,输入/b,URL还是/b,但是网页跳转/a
routes:[
{path:'/a',alias:'/b'}
]