Vue - 监听及路由

在项目中遇到的问题，记录下来，方便日后查阅和复习😁
对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需引入前端路由系统，这也就是vue-router存在的意义，前端路由的核心，就在于---改变视图的同时不会向后端发出请求。

1、Vue Router 基本概念

Vue Router 是Vue.js官方的路由管理器
路由我理解就是指向的意思，例如当我点击首页上的按钮时，页面中就显示首页的内容，也可以说是一种映射。
路由中有三个基本的概念route,router,routes
 1,route：它是一条路由 首页按钮 => 首页内容
 2,routes：它是一组路由 例如[{首页按钮 => 首页内容},{列表按钮 => 列表内容}]
 3,router：是一个机制，它来管理路由

2、如何使用

1、页面实现（vue）
   在vue-router中定义了两个标签<router-link>和<router-view>来对应点击和显示部分
   <router-link>还有一个重要的属性to，定义点击之后跳到哪里去。
   例如：<router-link to:'/index'>首页</router-link>
2、js中配置路由
  一般在项目中都会是多路由的所以直接配置routes，我在项目中配置的。
  //引入vue和vue-router
  import Vue from 'vue'
  import Router from 'vue-router'
  import List from '../views/list.vue' //引入要跳转的页面
  import Detail from '../views/detail.vue'
  Vue.use(Router)  // 使用vue-router
  export default new Router({
    mode: 'history',  //去掉路由的#号
    //⚠️使用mode:'history'，需服务端支持，会出现404问题
    routes: [{
        path: '/', // 路径
        name: 'list', // 命名路由
        component: List // 组件名称
      },{
        path: '/detail',
        name: 'detail',
        component: Detail，
        children:[{  //嵌套路由
            path: '/detail-list',
            name: 'detai-listl',
            component: Detail-list
        }]
      },{
         path:'/',
         redirect:'/list' //重定向
      }
    ]
3、参数传递
  params和query
  params：参数不会显示到路径上，刷新参数会被清除
  query：参数会显示到路径上，刷新参数还会存在
(1)在router-link上传递参数
  <router-link :to="{name:'参数名称',query:参数值"></router-link>
(2)在a标签上写点击事件传递参数
  <a @click='routerTo'>query/params</a>
  methods:{
    routerTo(){
      this.$router.push({
        name:'路由名称',
        params:{   //query方法雷同
            参数名称:'参数值'
        }
      })
    }
  }
(3)接受参数
  data () {
    return {
      数据名称: this.$route.query.参数值, // 获取参数 如是params就直接把query替换就好
      itemId: this.$route.query.itemId //项目中所写
    }
  }
history和hash的区别：
1、hash是默认的->地址栏URL中的#号 
特点在于虽出现在URL中，但不会被包括在http请求中，对后端没有影响，因此改变hash不会重新加载页面。
2、history->利用了html5中新增的pushState和replaceState方法（需要特定浏览器支持）
这两个方法用于浏览器的历史记录栈，在当前已有的back，go的基础之上，提供了对历史记录栈修改的功能。
当修改时虽然改变了当前的URL但浏览器不会立即向后端发出请求

监听

由于项目中切换参数值不能直接渲染到数据中需写入监听方法
watch: { // 监听参数值的变化，每次变化重新给itemId赋值
    '$route.query.itemId' () {
      this.itemId = this.$route.query.itemId
    }
}

效果如图

屏幕录制.gif

路由还有好多更深的知识点，需要去学习，遇到这些基础的先记录下来，防止自己忘记。。。。学无止境啊加油⛽️

最后编辑于：2019.05.22 17:12:57