vue-router

Posted hooyun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-router相关的知识,希望对你有一定的参考价值。

官网:https://router.vuejs.org/zh-cn/

 第1节:路由开始

  安装:npm install vue-router --save (使用vue-cli初始化项目时,若已安装,不需重新安装)

  

  配置路由:

  使用vue-cli初始化的项目中,src/router/index.js是路由的配置文件。

import Vue from ‘vue‘   //引入Vue
import Router from ‘vue-router‘  //引入vue-router
import Hello from ‘@/components/Hello‘  //引入根目录下的Hello.vue组件
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由,这里是个数组
    {                    //每一个链接都是一个对象
      path: ‘/‘,         //链接路径
      name: ‘Hello‘,     //路由名称,
      component: Hello   //对应的组件模板
    }
  ]
})

 

  router-link制作导航:

   <router-link to="/">[显示字段]</router-link>

    to:是我们的导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成  to=”/”  ,

  •  [显示字段] :就是我们要显示给用户的导航名称,比如首页  新闻页。
  •   
    <router-view>渲染组件:
    <!-- 路由匹配到的组件将渲染在这里 --> 
    <router-view></router-view>

     

 

<template>
  <div id="app">
    <router-link to="/1">Hello</router-link>
    <router-link to="/2">World</router-link>
    <router-view/>
  </div>
</template>

 

 

第2节:配置子路由

  子路由的写法是在原有的路由配置下加入children字段。  

import Vue from ‘vue‘   
import Router from ‘vue-router‘  
import Hello from ‘@/components/Hello‘  
import Hi from ‘@/components/Hi‘ 
import Hi1 from ‘@/components/Hi1‘ 
import Hi2 from ‘@/components/Hi2‘ 
 
Vue.use(Router) 
 
export default new Router({
  routes: [             
    {                    
      path: ‘/‘,        
      name: ‘Hello‘,     
      component: Hello   
    },{
      path:‘/hi‘,
      component:Hi,
      children:[
        {path:‘/‘,component:Hi},
        {path:‘hi1‘,component:Hi1},
        {path:‘hi2‘,component:Hi2},
      ]
    }
  ]
})

 

 

第3节:vue-router参数传递

  参数的传递是个最基本的业务需求 。通过URL地址来传递参数是一个形式。

  

  一、用name传递参数

  1、在路由文件src/router/index.js里配置name属性。   

routes: [
    {
      path: ‘/‘,
      name: ‘Hello‘,
      component: Hello
    }
 ]

  2、模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示:

<p>{{ $route.name}}</p>

 

  二、通过<router-link> 标签中的to传参

  也许上边的传参很不正规,也不方便,其实我们多数传参是不用name进行传参的,我们用<router-link>标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成:to。

   <router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>   

  • name:就是我们在路由配置文件中起的name值。
  • params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。

  在模板里用$route.params.username进行接收。

   {{$route.params.username}} 

 

第4节:vue-router 利用url传递参数

  在实际开发也是有很多用URL传值的需求,比如我们在新闻列表中有很多新闻标题整齐的排列,我们需要点击每个新闻标题打开不同的新闻内容,这时在跳转路由时跟上新闻编号就十分实用。

  

  :冒号的形式传递参数

  1、在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。  

{
    path:‘/params/:newsId/:newsTitle‘,
     component:Params
}

  我们需要传递参数是新闻ID(newsId)和新闻标题(newsTitle).所以我们在路由配置文件里制定了这两个值。

  

  2.在src/components目录下建立我们params.vue组件,也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。  

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新闻ID:{{ $route.params.newsId}}</p>
        <p>新闻标题:{{ $route.params.newsTitle}}</p>
    </div>
</template>
 
<script>
export default {
  name: ‘params‘,
  data () {
    return {
      msg: ‘params page‘
    }
  }
}
</script>

 

  正则表达式在URL传值中的应用:

  加入正则需要在路由配置文件里(/src/router/index.js)以圆括号的形式加入。

   path:‘/params/:newsId(\\d+)/:newsTitle‘, 

 

第5节:vue-router 的重定向-redirect

  我们只要在路由配置文件中(/src/router/index.js)把原来的component换成redirect参数就可以了。

export default new Router({
  routes: [
    {
      path: ‘/‘,
      component: Hello
    },{
      path:‘/params/:newsId(\\d+)/:newsTitle‘,
      component:Params
    },{
      path:‘/goback‘,
      redirect:‘/‘
    }
 
  ]
})

 

第6节:alias别名的使用

  使用alias别名的形式,我们也可以实现类似重定向的效果。

{
    path: ‘/hi1‘,
    component: Hi1,
    alias:‘/jspang‘
 }
<router-link to="/jspang">jspang</router-link>

  redirect和alias的区别:  

  • redirect:仔细观察URL,redirect是直接改变了url的值,把url变成了真实的path路径。
  • alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了<router-view>中的内容。

    

   别名请不要用在path为’/’中,代码的别名是不起作用的。

 

第7节:路由的过渡动画

 

  <transition>标签

  想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性。

<transition name="fade">
  <router-view ></router-view>
</transition>

 

  css过渡类名:

  1. fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
  2. fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
  3. fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
  4. fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。

  从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。

  

  App.vue页面里加入四种CSS样式效果,并利用CSS3的transition属性控制动画的具体效果

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

  上边的代码设置了改变透明度的动画过渡效果,但是默认的mode模式in-out模式,这并不是我们想要的。

 

  过渡模式mode:  

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

 

第8节:mode的设置和404页面的处理

    mode

  • hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 html5 History Api 的浏览器。

  • history: 依赖 HTML5 History API 和服务器配置

 

  404页面的处理

   用户会经常输错页面,当用户输错页面时,我们希望给他一个友好的提示,为此美工都会设计一个漂亮的页面,这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制。

  设置我们的路由配置文件(/src/router/index.js):

{
   path:‘*‘,
   component:Error
}

  这里的path:’*’就是找不到页面时的配置,component是我们新建的一个Error.vue的文件。

 

第9节:路由中的钩子

  路由的钩子选项可以写在路由配置文件中,也可以写在我们的组件模板中。

 

  路由配置文件中的钩子函数

  我们可以直接在路由配置文件(/src/router/index.js)中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。

{
      path:‘/params/:newsId(\\d+)/:newsTitle‘,
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log(‘我进入了params模板‘);
        console.log(to);
        console.log(from);
        next();
},

  三个参数:

    1. to:路由将要跳转的路径信息,信息是包含在对像里边的。
    2. from:路径跳转前的路径信息,也是一个对象的形式。
    3. next:路由的控制参数,常用的有next(true)和next(false)。

 

  写在模板中的钩子函数

  在配置文件中的钩子函数,只有一个钩子-beforeEnter,如果我们写在模板中就可以有两个钩子函数可以使用:

  • beforeRouteEnter:在路由进入前的钩子函数。
  • beforeRouteLeave:在路由离开前的钩子函数。
export default {
  name: ‘params‘,
  data () {
    return {
      msg: ‘params page‘
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }
}
</script>

 

第11节:编程式导航

  之前导航都是用<router-link>标签或者直接操作地址栏的形式完成的,那如果在业务逻辑代码中需要跳转页面我们如何操作?这就需要编程式导航,顾名思义,就是在业务逻辑代码中实现导航。

 

  this.$router.go(-1) 和 this.$router.go(1)

  后退和前进,功能跟我们浏览器上的后退和前进按钮一样,这在业务逻辑中经常用到。

  router.go(-1)代表着后退

<script>
export default {
  name: ‘app‘,
  methods:{
    goback(){
      this.$router.go(-1);
    }
  }
}
</script>

 

  this.$router.push(‘/xxx ‘)

  这个编程式导航都作用就是跳转,比如我们判断用户名和密码正确时,需要跳转到用户中心页面或者首页,都用到这个编程的方法来操作路由。

export default {
  name: ‘app‘,
  methods:{
    goback(){
      this.$router.go(-1);
    },
    goHome(){
      this.$router.push(‘/‘);
    }
  }
}

 

以上是关于vue-router的主要内容,如果未能解决你的问题,请参考以下文章

百行代码带你入门 vue-router!

typescript vue-router代码分裂

Vue-Router

vue2.0有哪些变化

Vue.js 生态之vue-router

Vue.js 生态之Vue-router 基础三