Vue-router

最新推荐文章于 2021-10-13 07:32:09 发布

欧气的猫七姑娘

最新推荐文章于 2021-10-13 07:32:09 发布

阅读量123

点赞数 1

分类专栏： vue vue-router

本文链接：https://blog.csdn.net/weixin_44063886/article/details/90741292

版权

vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

vue-router

1 篇文章 0 订阅

订阅专栏

Vue-router

后端路由：
前端路由：借助hash来完成前端路由。http请求中不包括hash值。完成单页面应用

安装vue-router包

可以使用script标签加载vue-router.js

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

可以使用npm install vue-router

npm install vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

vue-router是基于vue的，所以，要想使用vue-router，必须先要有vue

使用vue-router步骤

在脚手架中使用

在main.js中引入vue 和vue-router

	import Vue from 'vue'
	import VueRouter from 'vue-router'

调用Vue.use(VueRouter)
- ```
Vue.use(VueRouter)
```

配置路由字典

var* routes=[

  {path:'/',redirect:'/login'},

  {path:'/login',component:login},

  {path:'/child',component:child}

]

装载路由字典
- ```
var router=new VueRouter({routes})
```

挂载到根实例上

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

vue-router中的组件

router-link
- 会默认渲染成a标签，可以通过tag属性修改想要渲染的标签结果
- to属性可以指向路由地址
- ```
<router-link to='./login'>登录页面</router-link>
```
router-view
- 路由出口，即通过路由规则匹配到的组件，渲染到的位置。

设置路由高亮的模式

页面中通过router-link点击跳转的路由，目标路由/即当前显示的路由，vue会自动添加一个 router-link-active，可以在app.vue中的style里面给这个类添加样式
通过自定义样式修改路由高亮
- ```
var router=new VueRouter({
  routes:routes,
  linkActiveClass:'myactive'
})
```
- 在路由的构造函数中通过linkActiveClass属性，自定义样式类即可

切换路由加动画效果

先用标签包裹

<transition>
   <router-view></router-view>
 </transition>

设置样式

.v-enter,.v-leave-to{
  opacity: 0;
  transform: translateX(140px);
}
.v-enter-active,.v-leave-active{
  transition:all 0.5s ease;
}

Vue中的动画

淡入淡出

官方链接：https://cn.vuejs.org/v2/guide/transitions.html#ad

进入动画	离开动画
v-enter v-enter-to 中间是v-enter-active	v-leave v-leave-to 中间是v-leave-active

1、官方–动画示例

<!--示例：-->
<!--通过点击按钮，切换h3标签的显示与隐藏-->
<input type="button" value="toggle"   @click='show=!show'>
<transition name='my'>
   <h3 v-if='show'>我是一个h3</h3>
</transition>

/*  css  样式*/
.v-enter,.v-leave-to{//开始，和结束的样式都规定好
  opacity: 0;
}
.v-enter-active,.v-leave-active{//规定中间过程
  transition:all 0.4s ease;
}

先用transition标签包裹上目标元素
根据过渡的类名写css样式

自定义类名样式
使用transition包裹目标元素，可以添加name属性

 <transition name='my'>
      <h3 v-if='show'>我是一个h3</h3>
   </transition>

定义样式类

.my-enter,.my-leave-to{
  opacity: 0;
  transform: translateY(300px);
}
.my-enter-active,.my-leave-active{
  transition:all 0.4s ease;
}

2、第三方动画库animate.css

在脚手架中使用：

下载：通过npm install animate.css 下载对应的包
引入：import animated from ‘animate.css’
注册：Vue.use(animated);
使用：
```
  <transition  enter-active-class="animated fadeInLeft"  :duration='200'>
      <h3 v-if='show'>我是一个h3</h3>
   </transition>
```
- 通过enter-active-class 类名使用，使用类名时，必须先有一个base类animated，然后再写对应的样式类
- 通过duration可以指定入场时间
- duration可以属性绑定，这样来控制入场时间和离场时间 :duration=’{enter:1000,leave:100}'

3、钩子函数

用transition包裹目标元素

 <input type="button" value='加入购物车'  @click="show=!show">
  <transition  @before-enter="beforeEnter"  @enter="enter"  @after-             enter='afterEnter'>
       <div v-if='show' class="ball"></div>
   </transition>

声明变量show:false

写钩子函数

beforeEnter (el) {
    //el就是执行动画的dom元素，可以看成是通过document.getElementById('')获取的元素
      // 动画入场之前，此时动画尚未开始，可以在beforeEnter中设置初始样式
      el.style.transform = 'translate(0,0)'
    },
    enter (el,done) {
        // enter表示动画开始之后的样式，可以设置 小球完成动画之后的，结束状态
        el.offsetWidth;
        //offsetWidth 虽然没有实际意义，但是必须要写，不写动画没有过渡效果
        el.style.transform = 'translate(150px,450px)';
        el.style.transition = 'all 1s ease';
        done();
        //执行玩enter()函数之后，默认需要等待一会才执行afterenter()，可以手动调用done(),即可以立即执行afterEnter（）
    },
    afterEnter (el) {
        //动画完成之后，自动执行
      this.show=!this.show;
    }

question?

在afterEnter()函数内部，只是控制小球的显示与隐藏，为什么，每次开始动画，小球都是从左上角出发？

因为每次动画执行开始，都要走动画的钩子函数，而在beforeEnter()函数中，已经将小球位移到了左上角。

4、群组动画 v-for

如果是要给通过v-for循环列表生成的视图，添加过度效果时，需要使用transitionGroup包裹v-for的item，同时，必须要绑定:key 属性
```
<transitionGroup>
   <li v-for='item in list' :key='item.id'>{{item.id+'--+item.name}}    </li>
</transitionGroup>
```
list列表的动画，点击按钮，会动态的有过渡效果的添加一条信息

点击每一条的时候，删除当前条，同时下面的要动态的过渡的上来。

//html
 <ul>
       <transitionGroup>
            <li v-for='item in list' :key='item.id'   @click="del(i)">{{item.id+'-----'+item.name}}</li>
       </transitionGroup>
     </ul>
     <div>
       <label for="">
         ID:
         <input type="text" v-model="id">
       </label>
       <br>
       <label for="">
         name:
         <input type="text" v-model="name">
       </label>
       <input type="button" value='点击' @click='add'>
     </div>

<script>
export default {
    data: function(){
      return {
        id:'',
        name:'',
        list:[
          {id: 1, name: '李红' },
          {id: 2, name: '张三' },
          {id: 3, name: '网速度' },
        ]
      }
    },
    methods: {
      // add:function(){
      //    this.list.push({id:this.id,name:this.name})
      // }
      add () {
        var obj = {id:this.id,name:this.name}
        this.list.push(obj)
      },
      del (i) {
        this.list.splice(i,1)
      }
    }
}
</script>

/*点击按钮添加的时候，出现动画*/
.v-enter,.v-leave-to{
  opacity: 0;
  transform:translateY(30px);
}
.v-enter-active,.v-leave-active{
  transition:all 2s ease;
}
/*v-move和v-leave-active配合使用，能够使列表后面的元素渐渐的漂上来*/
li:hover{
  background-color:hotpink;
  transition:all .5s ease;
}
.v-move{
  transition:all 1.5s ease;
}
.v-leave-active{
  position: absolute;
}

注意：

可以给transition-group 添加属性 appear可以使页面初始加载时具有过渡效果
transition-group 默认会被渲染成span元素，所以不符合W3C规范，可以通过tag属性，指定渲染的元素，将其渲染成ul元素。

路由传参

使用query方式传参

//1.使用查询字符串进行传参
<router-link to="./child?lid=12"  tag='span'>小孩页面</router-link>

//2.传递的参数保存在this.$route.query对象中 
console.log(this.$route.query)

一般通过点击router-link跳转时，可以附带参数，并在目标的vue文件中，通过this.$route.query拿到传递的参数

使用params传参

//1.使用params方式进行传参，必须先要在路由字典中进行配置
var routes = [
  { path: '/', redirect: '/login' },
  { path: '/login/:id', component: login },
  { path: '/child', component: child }
]

//2.在跳转时传递参数，注意形式是直接/12
<router-link to="./login/12"  tag='span'>登陆</router-link>

//3.传递的参数保存在this.$route对象中的params参数中
console.log(this.$route.params)

嵌套路由

何时会需要用到嵌套路由？

当一个组件比如路由地址为/account，下面又有不同的组件，比如’/login’和’/register’这两个组件，则需要在组件account中创建一个router-view作为这两个组件的出口

步骤

//1.先需要在组件的路由匹配规则中加上children属性，值为array
var routes = [
  { path: '/', redirect: '/account' },
  { 
    path: '/account', 
    component: account,
    children:[
        {path:'login' , component:login},
        {path:'register' , component:register},
  ] }
]

<!--2.在组件account中单击跳转到不同的租件-->
<template>
    <div id="account">
        <p>这是account组件</p>
        <router-link to='/account/login'>登陆</router-link>
        <router-link to='/account/register'>注册</router-link>
        <router-view></router-view>
    </div>
</template>

注意，children中的path后面，不可以加/，因为加了/后，默认是根路由

命名视图

什么意思？就是给router-view视图起一个name属性，其值对应有名字的组件
一个页面想要展示多个组件时，即想要使用多个坑(router-view)时。
```
  var routes = [
    { path: '/', redirect: '/account' },
    { 
      path: '/account', 
      components:{
        'default':account,
        'main':login,
        'left':register
      },
    },
  ]
```
- 比如我要在一个account路由地址下面，同时输出3个路由出口。
  
  一般情况下，一个路由地址只会对应一个组件，所以这时需要进行修改，将component->components
```
  <div id="app">
      <router-view></router-view>
      <router-view name='main'></router-view>
      <router-view name='left'></router-view>
  </div>
```
- 在html片段上面，通过给router-view加一个name属性，可以给视图指定要加载的组件。
  
  补充：如果需要两个box，左一个，右一个。可以通过flex:2,flex:8控制