Vue中路由router的基本使用

1.vue-router的安装

1. 普通安装
   先下载vue-router.js
   导入，要先导入vue.js包

<script src="vue-router.js"></script>

2. webpack安装
   安装命令：

npm install vue-router

导入，要先导入vue

import VueRouter from'vue-router'

启用

Vue.use(VueRouter)

一旦将包导入，浏览器就会启用路由

2.vue-router的使用

1. 创建一个路由对象

var router1=new VueRouter({
//路由匹配规则
routes:[
{
//路由匹配规则对象
//当被监听的路由链接地址被触发时，会展示对应的组件
path:'/监听的路由链接地址'，
component:要展示的组件模板对象
},
//利用redirect设置默认展示的组件
{
path:'/',
redirect:'/监听的路由链接地址'
}
],

//非必需
//修改默认样式名称，可以将router-link-active修改为自定义的样式名称
//在<router-link>标签中激活是会使用自定义的样式名称
linkActiveClass:'自定义的样式名称'
})

2. 创建组件模板对象

var 要展示的组件模板对象={template:'<p>第一个</p>'}
//template和component很容易混淆

3. 将路由对象注册到Vue实例中

var vm=new Vue({
router:router1
})

4. 在页面中增加占位符

<router-view></router-view>

这是vur-router提供的占位符，用来展示路由规则中匹配到的组件

5. 增加标签触发路由器

<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.给路由加动画

1. 用transition标签将router-view包裹起来

<transition mode="out-in">
<router-view></router-view>
</transition>

2. 定义样式

.v-enter,.v-leave-to{
	opacity:0;
	transform:...;	
}
.v-enter-active,v-leave-active{
	transition:all 时间 ease
}