1.vue-router的安装
- 普通安装
先下载vue-router.js
导入,要先导入vue.js包
<script src="vue-router.js"></script>
- webpack安装
安装命令:
npm install vue-router
导入,要先导入vue
import VueRouter from'vue-router'
启用
Vue.use(VueRouter)
一旦将包导入,浏览器就会启用路由
2.vue-router的使用
- 创建一个路由对象
var router1=new VueRouter({
//路由匹配规则
routes:[
{
//路由匹配规则对象
//当被监听的路由链接地址被触发时,会展示对应的组件
path:'/监听的路由链接地址',
component:要展示的组件模板对象
},
//利用redirect设置默认展示的组件
{
path:'/',
redirect:'/监听的路由链接地址'
}
],
//非必需
//修改默认样式名称,可以将router-link-active修改为自定义的样式名称
//在<router-link>标签中激活是会使用自定义的样式名称
linkActiveClass:'自定义的样式名称'
})
- 创建组件模板对象
var 要展示的组件模板对象={template:'<p>第一个</p>'}
//template和component很容易混淆
- 将路由对象注册到Vue实例中
var vm=new Vue({
router:router1
})
- 在页面中增加占位符
<router-view></router-view>
这是vur-router提供的占位符,用来展示路由规则中匹配到的组件
- 增加标签触发路由器
<a href="#/监听的路由链接地址"></a>
//一定要加一个‘#’,不然不会触发hash去匹配路由
//建议使用<router-link>,使用时不用加#号
<router-link to="/监听的路由链接地址" tag="想要修改成为的标签"></router-link>
//<router-link>标签在该标签被触发时,会自动添加class属性router-link-exact-active和router-link-active,可以给.router-link-active设置样式,使得被触发时有反应
当页面上跳转到#/开头的地址时,会访问Vue实例下的router对象中的路由,路由会根据路由的匹配规则,将对应的组件模板渲染到中去
3.给路由加动画
- 用transition标签将router-view包裹起来
<transition mode="out-in">
<router-view></router-view>
</transition>
- 定义样式
.v-enter,.v-leave-to{
opacity:0;
transform:...;
}
.v-enter-active,v-leave-active{
transition:all 时间 ease
}