手记

vue-router教程


一、文件目录说明

main.js:应用的入口文件【js文件入口】

App.vue:根组件,整个组件的入口【组件文件入口】

加载文件不要后缀名:

resolve:{

    extensions:['.js','.vue','.json'],

    alias:{

        'vue$':'vue/dist/vue.esm.js',

        '@':resolve('src')  //@就代表了"src"这个目录

    }

}

import App from './App';  就相当于 './App.vue';

import router from './router'  //加载某个目录下的index.js文件,可以简写,就相当于 './router/index.js'

.gitignore

上传git仓库的时候,不上传某些文件,比如node_modules,因为太大了,

所以从git仓库clone文件下来的时候,首先就是要npm install,安装package.json里面定义的依赖包

然后就是npm run dev

index.js文件,定义路由(默认导出)

export default new Router({})

也可以:

let router = new Router({}) //先定义,下面导出,这样就可以用到router路由实例了

export default router

导出之后,在main.js里面引入的:import router from './router',得到一个路由实例

然后再将路由实例router注入到new Vue()这个根实例里面,就可以用到router里面的一些信息

然后在App.vue里面,写入<router-view></router-view>,展示对应渲染的组件

index.js Vue.use( Router ) //通过这种写法,就可以在每个组件里面,通过this.$router访问到当前路由实例

二、使用步骤

    安装模块

        npm install vue-router --save -dev (vue-cli脚手架里面就已经安装好了)

    引入模块

        import *VueRouter* from 'vue-router'

    作为vue的插件

        Vue.use(*VueRouter*)

    创建路由实例对象

        new VueRouter({

            ...配置参数

        })

    注入Vue选项参数

        new Vue({

            router

        })

    告诉路由渲染位置

        <router-view></router-view>

三、router-link各种配置项

一个路径,对应渲染一个组件,实际就是分别替换<router-view></router-view>

1、目标地址可以写死

<li><router-link to="/home">home</router-link></li>

2、目标地址可以动态绑定

<li><router-link :to="index">home</router-link></li>

export default{

    name:'App',

    data(){

        return {

            index:'/home'

        }

    }

}

3、目标地址可以写成对象形式

<li><router-link **:to="{path:'/home'}">home**</router-link></li>

4、导航不仅仅只用a标签来设置,也可以使用别的标签,如div、p、li等等

<router-link :to="index" tag="li">  //写上tag="li"即可

    <i class="fa fa-home"></i>

    <span>home</span>

</router-link>

5、不同组件,设置同一套样式

<router-view class="center" />  //这会把类名.center渲染到每个组件的根元素上,就可以所有路由组件共享一个类名

6、改变导航切换事件,默认是click

<router-link :to="index" tag="li" event="mouseover">

7、重定向

{

        path:'*',

        //component:noPath

        //重定向

        //redirect:'/about'

        //redirect:{path:'/home'}

        //redirect:{name:'Document'}

        redirect:(to)=>{  //动态设置重定向的目标

            console.log(to) //目标路由对象就是访问的路径的路由信息

            if(to.path === '/123'){

                return '/home'

            }else if(to.path === '/456'){

                return {path:'/about'}

            }else{

                return {name:'Document'}

            }

        }

    }

四、路由嵌套子路由

在path里面,'/'都是相对根路径而言,如果写子路由,那么前面就不需要加'/'了

{

    path: '/about',

    component: about,

    children:[

        {

            path:'',  //默认的子路由 /about

            name: 'About',

            component:work

        },

        {

            path:'study',  //前面不需要加'/'

            name: 'Study',

            component:study

        },

        {

            path:'hobby',

            name: 'Hobby',

            component:hobby

        }

    ]

}

<template>

  <div class="about">

    <ul>

        <router-link to="/about" **exact** tag="li">

            <a>work</a>

        </router-link>

        <router-link to="/about/study" tag="li">

            <a>study</a>

        </router-link>

        <router-link to="/about/hobby" tag="li">

            <a>hobby</a>

        </router-link>

    </ul>

    <router-view></router-view>

  </div>

</template>

也可以使用name,此时需要动态绑定v-bind

<template>

  <div class="about">

    <ul>

        <router-link :to="{name:'Work'}" exact tag="li">

            <a>work</a>

        </router-link>

        <router-link :to="{name:'Study'}" tag="li">

            <a>study</a>

        </router-link>

        <router-link :to="{name:'Hobby'}" tag="li">

            <a>hobby</a>

        </router-link>

    </ul>

    <router-view></router-view>

  </div>

</template>

五、命名视图:单页面多路由区域操作

在同级同时展示多个视图,而不是嵌套展示

{

      path: '/document',

      name: 'Document',

      components:{

        default:document,  //默认的

        slider:slider  //新添加的

      }

    },

<router-view name="slider" class="center" />  //有name属性的,会匹配到components里面对应名称的组件

<router-view class="center" />  //没有name属性的会自动对应default的组件

六、滚动行为

记录页面滚动的位置,点击浏览器上的前进后退按钮,仍然会回到对应的页面位置

在index.js里面配置

export default new Router({

    mode:'history',

    linkActiveClass:'is-active',  //表示给选中的导航添加类名is-active

    scrollBehavior(to,from,savePosition){ //点击浏览器的前进后退按钮或切换导航时触发该事件

        console.log(to); //要进入的目标路由对象,即要去向哪里

        console.log(from); //离开的路由对象,即从哪里来

        console.log(savePosition);  //记录滚动条的坐标位置 只在点击前进后退按钮时才记录

        if(savePosition){

            return savePosition

        }else{

            return {x:0,y:0}

        }

    },

    routes:[

        {

      path: '/home',

      name: 'Home',

      component: home

      meta:{

        index:0

      }

    }

    ]

})

七、动态路径

匹配到的所有路由,全部映射到同一个组件

路径:/user/:userId/ userId为动态路径参数

获取参数:路由信息对象的params

具体例子:比如用户登录个人信息页,页面是一样的,都是同一个组件,但是不同用户要展示的信息是不一样的,这就通过userId来展示对应的信息,拿到userId就可以获取到用户的信息

vue的路由有一个路由实例$router

通过在Vue根实例的router配置传入router实例

new Vue({

  el: '#app',

  router,  //也可以写成router:router

  components: { App },

  template: '<App/>'

})

在每一个组件里面,通过$router拿到router路由实例

$route 当前激活的路由信息对象,每个组件实例都会有,每次成功导航后都会产生一个新的对象

vue-router教程

{

    path: '/user/:userId?',

    name: 'User',

    component: user

},

<template>

    <div class="user">

        <div class="user-list">

           <!-- <router-link :to="'/user/'+item.id" :key="index" v-for="item,index in userList">{{item.userName}}</router-link>-->

            <router-link :to="{path:'/user/'+item.id,query:{info:'follow'}}" :key="index" v-for="item,index in userList">{{item.userName}}</router-link>

        </div>

        <div class="user-list" v-show="userInfo.userName">

            <p>姓名:{{userInfo.userName}}</p>

            <p>性别:{{userInfo.sex}}</p>

            <p>爱好:{{userInfo.hobby}}</p>

        </div>

        <hr />

        <div class="info-list" v-if="userInfo.userName">

            <router-link exact to="?info=follow" >follow</router-link>

            <router-link exact to="?info=share" >share</router-link>

                    <!--<router-link exact :to="{path:'',query:{info:'follow'}}">他的关注</router-link>

            <router-link exact :to="{path:'',query:{info:'share'}}">他的分享</router-link>-->

            <div>{{$route.query}}</div>

        </div>

    </div>

</template>

<script>

let data = [

        {

                id:1,

                userName:"leo1",

                sex:'男',

                hobby:'写代码'

        },

        {

                id:2,

                userName:"leo2",

                sex:'男',

                hobby:'唱歌'

        },

        {

                id:3,

                userName:"leo3",

                sex:'男',

                hobby:'读书'

        }

]

export default{

    name:"User",

    data(){

        return {

            userList:data,

            userInfo:{}

        }

    },

    watch:{  //监测Vue实例上的数据变动,这里是监听$route,路径发生变化,$route会重新赋值,监控了这个属性,会执行里面的函数

        $route(){

            this.getData();

        }

    },

    created(){  //ajax提交信息也放在这里面

        // 渲染这个组件会调用一次这个生命周期函数

        // 复用这个组件,这个函数不会再次被调用了

        // 地址一旦发生变化,$route会重新生成一个路由信息对象

        this.getData();

    },

    methods:{

        getData(){

            let id = this.$route.params.userId;

            if(id){

                this.userInfo = this.userList.filter((item)=>{  //this.userList是数组,现在需要返回的是一个对象,所以取数组的第一项

                    return item.id == id;

                })[0]

            }else{

                this.userInfo = {}

            }

        }

    }

}

</script>

八、给导航切换增加过度动画transition

过渡的css类名:

v-enter:定义进入过渡的开始状态

v-enter-active:定义进入活动状态

v-enter-to:定义进入的结束状态

v-leave:定义离开过渡的开始状态

v-leave-active:定义离开活动状态

v-leave-to:定义离开的结束状态

vue-router教程

自定义过度动画:

.left-enter{

    tranform:translateX(-100%)

}

.left-enter-to{

    tranform:translateX(0)

}

.left-enter-active{

    transition:1s;

}

使用:

<transition name="left" mode="out-in">

    <router-view class="center"></router-view>

</transition>

过渡模式:

可能会有2个组件同时出现在页面上的情况,会重叠在一起,很难看。这里就用到了过渡模式

in-out:新元素先进行过渡,完成之后当前元素过渡离开

out-in:当前元素先进行过渡,完成之后新元素过渡进入

<transition mode="out-in">

    <router-view class="center"></router-view>

</transition>

路由元信息:

在路由配置中meta可以配置一些数据,用在路由信息对象中

访问meta中数据:$route.meta.index //index是自己设置的属性名

<template>

  <div id="app">

        <div class="nav-box">

            <ul class="nav">

                <router-link :to="idx" tag="li" event="mouseover">

                    <i class="fa fa-home"></i>

                    <span>home</span>

                </router-link>

                <li>

                    <router-link :to="{path:'/about'}" event="mouseover">about</router-link>

                </li>

                <li>

                    <router-link to="/document" event="mouseover">document</router-link>

                </li>

                <li>

                    <router-link to="/user" event="mouseover">user</router-link>

                </li>

            </ul>

        </div>

        <router-view name="slider" class="" />

    <!--<transition mode="out-in">

            <router-view class="center"></router-view>

        </transition>-->

        <transition :name="names">

            <router-view class="center"></router-view>

        </transition>

  </div>

</template>

<script>

export default {

  name: 'App',

  data(){

    return{

        idx:'/home',

        names:"left"

    }

  },

  watch:{

    $route(to,from){

        console.log(to.meta.index,from.meta.index)

        if(to.meta.index < from.meta.index){

            this.names="left"

        }else{

            this.names="right"

        }

    }

  }

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

.v-enter{

    opacity: 0;

}

.v-enter-to{

    opacity: 1;

}

.v-enter-active{

    transition: 0.5s;

}

.v-leave{

    opacity: 1;

}

.v-leave-to{

    opacity: 0;

}

.v-leave-active{

    transition: 0.5s;

}

.left-enter{

    transform: translateX(-100%);

}

.left-enter-to{

    transform: translateX(0);

}

.left-enter-active,.right-enter-active{

    transition: 1s;

}

.right-enter{

    transform: translateX(100%);

}

.right-enter-to{

    transform: translateX(0);

}

index.js配置:

{

    path: '/home',

    name: 'Home',

    component: home,

    meta:{

        index:0

    }

},

</style>

九:编程式导航

借助于router的实例方法$router,通过编写代码来实现导航的切换

$route为当前router跳转对象,里面可以获取name、path、query、params等

$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

back:回退一步 //this.$router.back();

forward:前进一步,这两种都只能前进或者后退一步 //this.$router.forward();

go:指定前进回退步数 //this.$router.go(-2);如果为0,则是刷新当前页面

push:导航到不同url,向history栈添加一个新的记录,用的比较多

this.$router.push('/document');或下面的用法:

this.$router.push({ path:'/document',query:{info:'follow'} });

replace:导航到不同url,替换history栈中当前记录

十:导航钩子函数

导航发生变化时,导航钩子主要用来拦截导航,让它完成跳转或者取消

执行钩子函数位置:

router全局

单个路由

组件中

钩子函数:

router实例上(全局钩子函数,所有导航通用):beforeEach、afterEach

单个路由中(只在访问定义beforeEnter的那个组件导航上才会触发):beforeEnter

组件内的钩子:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

钩子函数接收的参数:

to:要进入的目标路有对象,到哪里去

from:正要离开导航的路有对象,从哪里来

next:用来决定跳转或取消导航,只有执行改函数才会渲染要进入的组件

案例1:定义全局钩子函数,只要有导航切换的地方就会触发,写在index.js路由配置文件下

let router = new VueRouter({})

//进入路由前

router.beforeEach( ( to,from,next )=>{  

    if( to.meta.login ){  //要进入的组件需要先进行登录

        console.log(to);

        next('/login');  //如果没有登录就重定向到登录页

    }else{

        next();  //已经登录,就渲染要进入的组件内容

    }

} )

//进入路由后

router.afterEach( ( to,from )=>{  //这里不需要next了,因为已经进入了

    if( to.meta.title ){  //切换不同的组件,页面title改变为对应的值

        window.document.title=to.meta.title;

    }else{

        window.document.title='myTitle';  //注意这里document前面需要加上window,否则访问不到

    }

} )

index.js

{

    path:'home',

    component:'home',

    meta:{

        index:1,

        login:true,

        title:'home'

    }

}

案例2:定义单个路由钩子函数,只在进入该路由导航时才执行该钩子函数,写在路由配置里

{

    path:'/document',

    conponent:'document',

    beforeEnter(to,from,next){

        next();  //执行了这个才会渲染组件

    }

}

案例3:定义组件内的钩子函数,进入该组件时执行该钩子函数,写在组件内

比如:about.vue组件

<script>

export default({

    data(){

        msg:'改变前',

        beforeRouteEnter( to,from,next ){

            //next();  //执行了这个才会渲染组件

            console.log(this);  //this是undefined,所以不能通过this.msg获取data,可以通过next的回调函数

            next( (vm)=>{

                vm.msg='改变了';

            } )

        },

        beforeRouteUpdate( to,from,next ){

            //next  //写了才会更新

        },

        beforeRouteLeave( to,from,next ){

            //next();  //写了这个,才会从当前导航离开,否则会一直停留在当前导航页

        }

    }

})

</script>

十、vue-cli项目实战

1、多个组件,将每个组件所需要的样式,抽离出来,放在assets/css/文件夹下面(assets文件夹放资源文件:css/js/img),

建立css入口文件app.css

然后在其中import引入全部的组件样式文件

然后在main.js里面,import这个app.css文件,// import './assets/css/app.css'

即可在项目中引入全部css文件( webpack会帮助引入 )

2、components文件夹放公共组件,views文件夹放每个页面独立的组件

3、libs:公共库,封装的js或者第三方工具库放在这里面

怎么使用自定义的库呢:

首先在main.js引入:import Utile from './lib/utils'

然后注册到Vue实例:Vue.use( Utile )

最后:就可以在每个组件,通过this访问到$local对象,对象上面有save和fetch两个方法

如果在组件内部获取不到this,可以通过router.app.$local来获取$local对象

4、

十一、项目知识点集结

1、$refs的用法

<input type="text" class="input1" ref="input1"/>

一般来讲,获取DOM元素,需document.querySelector(".input1").value获取这个dom节点的值

用ref绑定之后,this.$refs.input1.value 就可以

2、

vue-router教程

router.beforeEach( ( to,from,next )=>{  

    if( to.meta.login ){ 

        console.log(to);  //这个是要进入的路由信息对象

    }

}

to对象里面有一个:matched数组Array[2],包含当前路由所有嵌套路径片段的路由信息,包括自己的信息和父路由的信息

3、some()方法

Array.some(function( item ){})

用于检测数组中的元素是否满足指定条件(函数提供),会依次执行数组的每个元素

如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测

如果没有满足条件的元素,则返回false

4、导航钩子函数,主要是用在进行导航是否跳转或者拦截的一些操作,比如点击导航,用户是否需要登录才能跳转还是说可以直接进行跳转

有三个地方可以写导航钩子函数

全局、单个路由、单个组件中

5、开发环境页面完成之后,使用命令:npm run build打包项目,生成dist文件夹上线

默认是把dist文件夹下面的所有文件放在服务器的根目录下

但是,如果不是放在根目录下,而是服务器的二级目录下,那么就得配置config/index.js文件,里面的assetsPublicPath属性,改为二级目录名称即可

6、页面上线之后,打开页面,然后刷新会出现404,需要配置apache里的httpd.conf文件

删除...前面的#号,释放该模块...具体看视频,只要是404,都重定向到index.html

©著作权归作者所有:来自51CTO博客作者xxxpjgl的原创作品,如需转载,请注明出处,否则将追究法律责任


0人推荐
随时随地看视频
慕课网APP