vue-router

Posted 2020-10-11 hooyun

官网：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. 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(‘/‘);
    }
  }
}