• vue-router2.0的用法


    随着vue越来越火,而vue-router却是一个项目不可或缺的,所以在这里结合实例总结一下router的用法,也是给自己的一个总结。

    1、首先第一步当然是安装vue-router依赖,当然也可直接script引用。接着新建一个router文件下新建一个index.js,这个文件主要用于配置路由。index.js代码如下:

    import Vue from 'vue'
    
    import Router from 'vue-router'
    
     
    
    Vue.use(Router)
    
    const Recommend = () => import('components/recommend/recommend')
    
    const Rank = () => import('components/rank/rank')
    
    const Search = () => import('components/search/search')
    
    const SingerDetail = () => import('components/singer-detail/singer-detail')
    
    const TopList = () => import('components/top-list/top-list')
    
     
    
    export default new Router({
    
      routes: [
    
        {
    
          path: '/',
    
          redirect: '/recommend'
    
        },
    
        {
    
          path: '/rank',
    
          component: Rank,
    
          children: [
    
            {
    
              path: ':id',
    
              component: TopList
    
            }
    
          ]
    
        },
    
        {
    
          path: '/search',
    
          component: Search,
    
          children: [
    
            {
    
              path: ':id',
    
              component: SingerDetail
    
            }
    
          ]
    
        }
    
      ]
    
    })

    我相信看过官网的都大概明白上面代码的意思,path:’/’意思是默认指定的路由路径,也就是刚进去指定的路由,这里默认指向recommend;而每个children代表子路由,比如Search这个组件的子路由是SingerDetail,当然可以指定三级、四级路由。

    2、第二步就是在main.js文件下引入router这个文件,并初始化。代码如下:

    import Vue from 'vue';
    
    import App from './App';
    
    import router from './router';
    
     
    
    new Vue({
    
      el: '#app',
    
      router,
    
      render: h => h(App)
    
    });

    3、第三步在App.vue这个文件下定义一个容器用于展示路由指定下的组件。代码如下:

    <template>
    
      <div id="app" @touchmove.prevent>
    
          <div class="tab">
    
              <router-link tag="div" to="/recommend">
    
                <span class="tab-link">推荐</span>
    
              </router-link>
    
              <router-link tag="div" to="/rank">
    
                <span class="tab-link">排行</span>
    
              </router-link>
    
              <router-link tag="div" to="/search">
    
                <span class="tab-link">搜索</span>
    
              </router-link>
    
          </div>
    
          <keep-alive>
    
            <router-view></router-view>
    
          </keep-alive>
    
      </div>
    
    </template>

    <router-view></router-view>就是路由容器,之所以放在keep-alive这个标签下是对数据进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染To=”/recommend”表示点击推荐这个标签就跳转到recommend这个路由,也就是我们之前配置的路径。

    讲到这里我们已经简单的完成一个单页面应用了。这里我采用的是模块化编程。我把路由配置、初始化、渲染写在各个文件下。这样也符合大家的组件化开发思路。下面我在进行一些路由用法的补充。

    4、多级路由的用法

    <template>
    
      <div class="recommend">
    
        <ul>
    
            <li @click="selectItem(item)" v-for="item in discList" class="item">
    
              item.text
    
            </li>
    
        </ul>
    
        <router-view></router-view>
    
      </div>
    
    </template>
    
    <script type="text/ecmascript-6">
    
      export default {
    
        data() {
    
          return {
    
            discList: [
    
              {dissid:1,text:'条目1'},
    
              {dissid:2,text:'条目2'},
    
              {dissid:2,text:'条目2'}
    
            ],
    
          }
    
        }
    
        methods: {
    
          selectItem(item) {
    
            this.$router.push({
    
              path: `/recommend/${item.dissid}`
    
            })
    
          }
    
        }
    
      }
    
    </script>

    在这里我通过在recommend这个组件下实现二级路由跳转。首先渲染discList列表里面的数据,点击li标签跳转到第一步在index.js定义的Recommend组件下的子路由Disc。通过$router.push()这个方法,带上这条数据的唯一id值即可实现子路由跳转。

    router.push()方法就是用来动态导航到不同的链接的。它会向history栈添加一个新的记录,点击<router-link :to="...">等同于调用router.push(...)

    5router.go()的用法

    router.go(n)

    这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)

    例子

    // 在浏览器记录中前进一步,等同于 history.forward()

    router.go(1)

    // 后退一步记录,等同于 history.back()

    router.go(-1)

    // 前进 3 步记录

    router.go(3)

    // 如果 history 记录不够用,那就默默地失败呗

    router.go(-100)

    router.go(100)

  • 相关阅读:
    复制表结构及数据
    mysql 字段名是关键字 报错
    mysql 截取字符串
    《官方资料》 例如:string 函数 、分组函数
    mysql event 入门
    Spring国际化
    Python学习记录
    精选股文
    为VS定制一个自己的代码生成器
    房产常识
  • 原文地址:https://www.cnblogs.com/wangdan0915/p/7744626.html
Copyright © 2020-2023  润新知