简介
前端路由简单的说，就是业内的跳转
进行不同组件之间的切换
使用
-
导入包
-
创建一个路由对象，当导入包之后，就有一个路由的构造函数，VueRouter，在创建路由对象时，可以传入一个配置对象，这个匹配对象中的route表示（路由匹配规则）的意思
-
路由匹配规则，每个路由规则都是一个对象，这个规则对象，身上都必须偶两个属性
-
path：表示监听那个路由连接地址
-
component：表示如果路由是起那么匹配到的path，则暂时component属性对应的那个组件，这个地方必须是一个组件的对象，而不是组件的引用名称
例如使用var login={
template:""
}这个login是对象
Vue.component('login',{
template:''
})，这个login就是一个名称
-
-
-
将路由规则对象注册到Vue实例上，用来监听URL地址 ，然后展示对应的组件
也就是说
- 导包
- 创建路由规则对象
- 将路由规则对象注册到Vue实例中
- 绑定到对应的vm实例上
- 将router-view注册到页面中
注意，第二步，创建路由对象时，其中的路由规则数组是“routes”
第四步，在将路由规则绑定到vm实例时，是router
<script src="../../js/vue-router.js"></script>-
var routerObi=new VueRouter({ routes:[ {path:'',component:}, ] });注意，path是地址栏显示的数据，component是组件对应的对象，不是字符串
-
OK
router:routerObj<router-view></router-view>
注意Vue中的路由是基于hash的，所以对它的调用的路由路径前面需要加上“#/XXX”
<a href="#/login">登录</a>
<a href="#/register">注册</a>
但是不推荐使用a连接的方式进行跳转，Vue封装了一个自定义的组件，默认渲染一个a标签，但是可以通过tag属性，传入标签的值来渲染别的标签
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
但是需要注意的是这个标签需要在vue对应实例标明的区域使用
重定向
也就是网页默认的url地址栏中的后缀，为了使一开始有一个固定的地址对应的组件，所以可以加上一个默认情况下的重定向属性，在路由规则中加上一个规则
{path:'/',redirect:'/login'}
这样就可以值初始化的时候默认进入login的组件，并且页面显示地址栏也是对应的path
选中高亮
对于router有一个.router-link-active，当选中一个路由时，就会默认给该路由的组件中添加上这个类，所以，我们只用给这个类添加一些样式，就可以实现点击高亮或者其他的样式
<style>
.router-link-active{
font-size:80px;
}
</style>
可以通过在创建路由对象时，在routes同级修改linkActiveClass属性值来修改使用哪一个类可以使选中高亮
var routerObj=new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register},
],
linkActiveClass:'myRouterActive'
});
路由添加动画
还是可以直接包裹在transition标签中
<transition enter-active-class="animated bounce">
<router-view></router-view>
</transition>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
<style>
.myRouterActive {
font-size: 80px;
}
</style>
<link rel="stylesheet" href="../../css/animate.css">
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<transition enter-active-class="animated bounce">
<router-view></router-view>
</transition>
</div>
<script>
var login = {
template: '<h1>登录组件</h1>'
}
var register = {
template: '<h1>注册组件</h1>'
}
var routerObj = new VueRouter({
routes: [
{path: '/', redirect: '/login'},
{path: '/login', component: login},
{path: '/register', component: register},
],
linkActiveClass: 'myRouterActive'
});
var vm = new Vue({
el: "#app",
data: {},
router: routerObj
})
</script>
</body>
</html>
路由点击触发切换页面的原理是：
点击按钮触发地址栏修改成XXX#/XXX，地址的修改触发路由，让路有监听到，是路由进行路由匹配，看路由的[]中有没有对应的path，如果有，就获取对应的component值指向对应的组件，从而显示其对应的组件信息
网友评论