Vue -- 总结 08

声明式导航

        vue-router提供了一个全局组件 router-link

        router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)

        router-link提供了声明式导航高亮的功能(自带类名)

<template>
  <div id="app">
    <h1>hello</h1>
    <router-link to="/index?id=999">首页 </router-link>
    // 动态路由绑定:to
    <router-link :to="{path:'/about'}">关于我们 </router-link>
    <router-link :to="{path:'/swiper/'+id}">轮播 </router-link>
    <!-- 命名路由 -->
    <router-link :to="{name:'joinUs'}">加入我们</router-link>

    <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      
      id:886
    }
  },
  components: {
    
  }
}
</script>

<style>

</style>

main.js 

import Vue from 'vue'
import App from './App.vue'
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import VueRouter from 'vue-router'

Vue.use(VueRouter)
Vue.config.productionTip = false

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
// 引入页面
import IndexPage from '@/views/IndexPage'
import AboutPage from '@/views/AboutPage'
import SwiperPage from '@/views/SwiperPage'
import JoinUsPage from '@/views/JoinUsPage'

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
//一个组件配置对象。
// 路由规则--一个路径对应一个组件
const routes = [
  {path:'/index',component:IndexPage},
  {path:'/about',component:AboutPage},
  {path:'/swiper/:xxx',name:"swiper",component:SwiperPage},
  {path:'/join',name:'joinUs',component:JoinUsPage}
  
]

// 3.创建路由对象
const router = new VueRouter({
  routes
})

// 4. 挂载根实例
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

src/views文件夹:页面组件 - 页面展示 - 配合路由用(新建一个文件夹views) 

IndexPage.vue

<!--  -->
<template>
<div class=''>
    <h1>首页--{{ this.$route.query.id }}</h1>

</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {

};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {

},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {
console.log('this--index',this);
},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>

</style>

AboutPage.vue

<template>
<div class=''>
    <h1>关于我们</h1>
</div>
</template>

<script>

export default {

data() {
//这里存放数据
return {

}
},

//方法集合
methods: {

},

//生命周期 - 创建完成（可以访问当前this实例）
created() {
//生命周期 - 创建完成（可以访问当前this实例）
created() {
console.log('this--about',this);
},

</script>
<style>

</style>

SwiperPage.vue

<template>
<div class=''>
    <h1>swiper页面--{{ $route.params.name }}</h1>
</div>
</template>

<script>

export default {

data() {
//这里存放数据
return {

}
},

//方法集合
methods: {

},

//生命周期 - 创建完成（可以访问当前this实例）
created() {
console.log('this-swiper',this);
},

</script>
<style>

</style>

 JoinUsPage.vue

<template>
<div class=''>
    <h1>加入我们</h1>
</div>
</template>

<script>

export default {

data() {
//这里存放数据
return {

}
},

//方法集合
methods: {

},

//生命周期 - 创建完成（可以访问当前this实例）
created() {
console.log('this-join',this);
},

</script>
<style>

</style>

编程式导航

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link to="..."> 相当于调用 router.push(...) ：

声明式	编程式
<router-link to="..."><br /><router-link :to="...">	router.push(...)

 

<template>
  <div id="app">
   <h1>编程式导航</h1>
   <button @click="jumpIndex(1)">跳转到关于我们</button>
   <button @click="jumpIndex(2)">跳转到加入我们页面</button>
   <button @click="jumpIndex(3)">name的特殊情况</button>
    <!-- 路由出口 -->

  <!-- 路由匹配到的组件将渲染在这里 -->
   <!-- 编程式的导航 -->
  <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      
    }
  },
  components: {
    
  },
  methods:{
    jumpIndex(type){
      console.log('this',this)
      let that = this;
      if(type==1){
        that.$router.push({
          path:"/about",
          // path只能和query搭配
          query:{
            name:"编程式导航"
          }
        })
      }else if(type==2){
        that.$router.push({
          // 一般情况下name和params和query搭配都可以
          name:"joinUs",
          // query:{
          //   name:"值"
          // }
          params:{
            name:"值"
          }
        })
      }else{
        that.$router.push({
          // 如果是路径后面拼参数这个参数的key一定要和路由规则的参数名一致
          // name要和params进行搭配
          // path:"/swiper",
          name:"swiper",
          query: {
          "参数名": 值
          }
          // params: {
  //  "参数名": 值
          // }
        })
      }
      
    }
  }
}
</script>

<style>

</style>

router路由

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

// 多次点同一个路由出现错误及解决方案
// 在导入VueRouter的时候，进行全局的处理
const originalPush = VueRouter.prototype.push
// 重写原型上的push方法，统一处理错误信息
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
// 引入页面
import IndexPage from '@/views/IndexPage'
// import AboutPage from '@/views/AboutPage'
// import SwiperPage from '@/views/SwiperPage'
// import JoinUsPage from '@/views/JoinUsPage'
// import NotFound from '@/views/NotFound'
// import AboutSon from '@/views/AboutSon'
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
//一个组件配置对象。
// 路由规则--一个路径对应一个组件
const routes = [
    {
        path:"/",
        redirect:"/index"
        
    },
  {
    path:'/index',
    component:IndexPage,
    meta:{
        // 路由元信息
        title:"首页"
    }

  },
  {
    path:'/about',
    // 路由懒加载
    component:()=>import('@/views/AboutPage'),
    children:[
        {
            path:"aboutSon",
            name:"aboutSon",
            component:()=>import('@/views/AboutSon')
        }
    ]

  },
  {path:'/swiper/:xxx',
    name:"swiper",
    component:()=>import('@/views/SwiperPage')},
  {path:'/join',
    name:'joinUs',
    component:()=>import('@/views/JoinUsPage')},
    {path:'/login',
      name:'login',
      component:()=>import('@/views/LoginPage')},
  {path:"*",
    component:()=>import('@/views/NotFound')}
]
// 3.创建路由对象
const router = new VueRouter({
    // vue-router 默认 hash 模式 就是带#的
    // mode: 'history',
  routes
})
export default router

过渡的基本使用

<template>
  <div id="app">
    <h1>过渡的基本使用</h1>
    <button @click="changFlag">显示与隐藏</button>
    <transition>
      <div v-if="flag" class="box">hello</div>
    </transition>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      flag:true
    }
  },
  components: {
    
  },
  methods:{
   changFlag(){
    this.flag = !this.flag
   }
  }
}
</script>

<style>
  .box {
    width: 150px;
    height: 150px;
    border: 1px solid red;
  }
   /* v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除 */
  .v-enter{
    background-color: skyblue;
  }
  
    /*v-enter-active：定义进入过渡生效时的状态。
    在整个进入过渡的阶段中应用，在元素被插入之前生效，
    在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数 */
    .v-enter-active{
      transition: all 2s;
    }

  /* v-enter-to：2.1.8 版及以上定义 进入过渡的结束状态。将要结束
  在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)， 在过渡/动画完成之后移除 */
  .v-enter-to{
    color:aqua
  }
  
  /* v-leave：定义离开过渡的开始状态。
  在离开过渡被触发时立刻生效，下一帧被移除 */

  /* v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，
  在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 */

  /* v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。 */
</style>

原文地址：https://blog.csdn.net/2301_78949452/article/details/141871737

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！