美文网首页
vue-router的使用

vue-router的使用

作者: 前端小木鱼 | 来源:发表于2018-09-04 17:58 被阅读0次

    一、vue-router简介

    1. Vue Router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
    2. 包含的功能有:
    • 嵌套的路由/视图表
    • 模块化的、基于组件的路由配置
    • 路由参数、查询、通配符
    • 基于 Vue.js 过渡系统的视图过渡效果
    • 细粒度的导航控制
    • 带有自动激活的 CSS class 的链接
    • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
    • 自定义的滚动条行为

    二、vue-router使用

    1. 安装:npm install --save vue-router
    2. 创建src/router/index.js文件来管理路由
    3. 配置src/router/index.js文件:
    import Vue from 'vue'                      //引入vue实例
    import Router from 'vue-router'      //引入vue-router
    
    Vue.use(Router)                            //使用Router  
    
    export default new Router({           //创建并导出Router实例  
      routes: [                                  //配置路由数组 
        {
          path: '/',                               //设置根路由  
          name: 'Root',
          components: {
            main: PostList,
          },
        },
        {
          path: '/article/:id/:name',       //设置动态路由接收参数
          name: 'Article',
          components: {
            main: Article,  
          },
        },
      ],
    })   
    
    1. 在main.js文件中将Router注入到vue实例:
    import Router from './router'     //引入Router
    
    new Vue({
      el: '#app',
      router: Router,      //vue实列中注入Router,注意属性名'router'不可更改
      template: '<App/>',
      components: {App},
    })
    
    1. 确定视图加载的位置
      <router-view></router-view>

    三、vue­-router路由的跳转和参数传递

    1. 必须在路由内加入路由的name
    2. 必须在path后加/: +传递的参数
    <router-link :to="{name: 'Article',params: {id: item.id,name: item.author.loginname}}">
      <span class="title">{{item.title}}</span>
    </router-link>
    //读取参数: this.$route.params.id
    

    四、vue-router的监听

    动态路由在来回切换时,由于它们都是指向同一组件,vue不会销毁再创建这个组件,而是复用这个组件。
    当第一次点击(如:/userinfor/weizhuanhua)的时候,vue 把对应的组件渲染出来,但在/userinfor/weizhuanhua, /userinfor/yunqiangwu点击来回切换的时候,这个组件就不会发生变化了,组件的生命周期不管用了。这时如果想要在组件来回切换的时候做点事情,那么只能在组件内部(UserInfor.vue中)利用watch 来监听$route 的变化。

    watch: {
      '$route'(to,from) {
        this.getUserInfor();
      }, 
    },
    

    相关文章

      网友评论

          本文标题:vue-router的使用

          本文链接:https://www.haomeiwen.com/subject/frjgwftx.html