2019-04-30 路由概述

2019-04-30 本文已影响0人 coderymy

简介

前端路由简单的说，就是业内的跳转

进行不同组件之间的切换

使用

导入包
创建一个路由对象，当导入包之后，就有一个路由的构造函数，VueRouter，在创建路由对象时，可以传入一个配置对象，这个匹配对象中的route表示（路由匹配规则）的意思
1. 路由匹配规则，每个路由规则都是一个对象，这个规则对象，身上都必须偶两个属性
  1. path：表示监听那个路由连接地址
  2. 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值指向对应的组件，从而显示其对应的组件信息

2019-04-30 路由概述

简介

使用

重定向

选中高亮

路由添加动画

猜你喜欢

热点阅读