vue中路由的基本使用

最新推荐文章于 2024-07-26 13:19:15 发布

嘻嘻哈哈-fang

最新推荐文章于 2024-07-26 13:19:15 发布

阅读量327

点赞数 1

分类专栏：过滤器 filters 路由的基本使用文章标签：路由的基本使用过滤器 filters

本文链接：https://blog.csdn.net/ff186345/article/details/103683188

版权

过滤器 filters 同时被 2 个专栏收录

1 篇文章 1 订阅

订阅专栏

路由的基本使用

1 篇文章 1 订阅

订阅专栏

路由

路由其实就是一个指向，把路径指向相应的组件地址

路由的基本使用

在vue中要实现路由是vue-router来实现

安装插件（注意在项目所在目录进行安装）
- ```
npm i vue-router
```
导入插件
- 在哪里导入插件呢？vue-router是vue的一个插件，也是一个全局的控制，所以最终是要挂载到new Vue上的,new Vue是在main文件中执行的，所以vue-router也就得在main文件中导入
- ```
import  VueRouter  from  'vue-router'
```
注册插件
- 在vue中，router在vue中要全局使用，是需要注册才行的
- ```
Vue.use(VueRouter) 
```

实例化router

let router = new VueRouter({  })    //router实例化

配置路由的规则

//配制router使用规则 
  let router = new VueRouter({  
   routes:[ // 路由规则配置，我们说了，路由就是一个地址与组件的一个指向，这个规则就是配制在这里的
       {
        path: "/路径"，    //这里配制一个路径地址
        component: 组件名   //这里对应一个.vue组件 ，也就是import一个组件，在这对应上
       }
       ] 
  })

把实例注入到 new Vue

new Vue({
    router    //这里的router就是上面所实例化的router
})

路由出口，告诉router，需要把组件渲染在哪一个位置

app.vue中写上一个标签，<router-view></router-view>

router-view标签将来会被匹配到的路径对应的组件替换掉

main.js中加入router写法代码

  import Vue from 'vue'
   import App from './App.vue'
   // 1:导入vue-router
   import VueRouter from "vue-router"
   //这里Home是自己components下创建的一个组件 
   import Home from "./components/Home"
   // 2:注册vue-router
   Vue.use(VueRouter)
   // 3:实例化vue-router
   const router = new VueRouter({
     // 配制vue-router
     routes: [
       {
         path: "/home",     //路径地址
         component: Home    //路径地址所对应的组件
       }
     ]
   
   })
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
     router    //4:注入到new Vue实例里面
   }).$mount('#app')

编程式导航(搜嘎,还是简单点吧...简单的说就是 : 跳转路由)

更灵活的控制路由跳转

用法

this.$router.push('路径')   //这里的路径就是前面路由routes所配制的path

作用

让你可以用代码进行路由的跳转，比如，根据接口获取到不同的值跳转不同的路由地址，这时候用标签模式是无法满足需求的，

用js代码控制就更灵活，这里this.$router就是相当于整个router实例，也就是控制整个路由的控制者

过滤器 filters

有的时候，有些数据没法直接拿来用，就需要对这些数据进行过滤处理，过滤器就是用来做这个功能的

局部过滤器（只能应用于当前组件）

定义（在自己所在组件里面定义）

//上面的value是过滤器的要过滤的值，return的值就是过滤器定义的结果
filters: {
    过滤器名字(value) {
       return 返回值 
    }
}

//这里的value就是过滤器方法里面的参数，也就是要过滤的值
<div class="time">{{value | 过滤器名字 }}</div>

全局过滤器 （全局过滤器定义后，所有组件都可使用）

定义（在main.js中做全局定义）

//value是过滤器的要过滤的值，这里return的值就是最终过滤器的值 
Vue.filter("过滤器名字",function(value){
  return  返回值        
})

使用

//这里的value就是过滤器方法里面的参数，也就是要过滤的值

作用：平时项目中用的较多的，就是对一些字符串加工之类的，如：接口传了你一个时间戳，你需要转换成相应的正常时间格式等。

Demo:

<template>
  <div>{{time | formatTime}}</div>
</template>
<script>
export default {
  data() {
    return {
      time: "1546275661000"
    };
  },
  filters: {
    formatTime(str) {
      let _date = new Date(+str);
      let _year = _date.getFullYear();
      let _month = ("0" + _date.getMonth() + 1).slice(-2);
      let _day = ("0" + _date.getDate()).slice(-2);
      let _h = ("0" + _date.getHours()).slice(-2);
      let _m = ("0" + _date.getMinutes()).slice(-2);
      let _s = ("0" + _date.getMinutes()).slice(-2);
      return (_year + "-" + _month + "-" + _day + "  " + _h + ":" + _m + ":" + _s
      );
    }
  }
};
</script>
<style>
</style>