vue学习总结四：理解vue-router

最新推荐文章于 2024-08-05 11:00:00 发布

Buddha_ITXiong

最新推荐文章于 2024-08-05 11:00:00 发布

阅读量1.2k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/Buddha_ITXiong/article/details/81064789

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

我们知道vue项目都是单页面应用，只有一个index.html文件，但是页面之前的跳转是依赖什么呢，vue提供了一个vue-router插件帮助我们实现页面之间的相互跳转，接下来我会重新改造一下之前的那个yourprojectname项目，新建四个页面:

主页---->列表页---->详情页---->个人中心页来帮助大家简单的了解一下router用法

首先我会清空项目中之前写的那些测试代码，然后新建几个文件夹和文件，项目结构如下：

相应的route文件夹下面的index.js也需要响应的变动：

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/containers/home/index'
import List from '@/containers/list/index'
import Detail from '@/containers/detail/index'
import Person from '@/containers/person/index'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },{
      path: '/list',
      name: 'List',
      component: List
    },{
      path: '/detail',
      name: 'Detail',
      component: Detail
    },{
      path: '/person',
      name: 'Person',
      component: Person
    },
  ]
})

打开页面查看效果如下：如果想看其他三个页面可以在url中输入响应的地址查看我就不一个一个截图了

首页：http://localhost:8080/#/
列表页：http://localhost:8080/#/list
详情页：http://localhost:8080/#/detail
个人中心页：http://localhost:8080/#/person

有了多页面就需要用户在页面之间相互跳转，上面我给大家演示只是通过在url中切换，真正做项目的话不可能要用户自己输入不同的url的，vue-router中跳转的方法有两种，接下来我会详细的为大家讲解清楚

通过<router-link></router-link>组件跳转
通过js来跳转

把首页改造如下：演示了两种不同的跳转方法

<template>
  <div class="home-page">
    <router-link to="/">去首页</router-link>
    <router-link to="/list">去列表页</router-link>
    <router-link to="/detail">去详情页</router-link>
    <router-link to="/person">去个人中心页</router-link>

    <div class="btn-box">
      <button type="button" name="home" @click="goPage">去首页</button>
      <button type="button" name="list" @click="goPage">去列表页</button>
      <button type="button" name="detail" @click="goPage">去详情页</button>
      <button type="button" name="person" @click="goPage">去个人中心页</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        message: 'Welcome to Home Page'
      }
    },
    methods:{
      goPage(e){
        const path= e.currentTarget.getAttribute('name');
        if(path==='home'){
          this.$router.push('/');
        }else{
          this.$router.push(path);
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .home-page
    font-size 0.26em
    a
      color deepskyblue
      display block
      margin 0.3rem 0.2rem
</style>

页面效果如下：

在上图中我们看到<router-link>组件在浏览器中被默认渲染成了a标签，如果我们不想让它渲染成a标签的话可以通过在组件上添加一个tag属性，属性值设置为你默认想生成的标签，

<router-link to="/" tag="div">去首页</router-link>
<router-link to="/list" tag="div">去列表页</router-link>
<router-link to="/detail" tag="div">去详情页</router-link>
<router-link to="/person" tag="div">去个人中心页</router-link>

我们把style样式也修改一下，给div元素设置和之前a标签同样的样式

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .home-page
    font-size 0.26em
    a,div
      color deepskyblue
      display block
      margin 0.3rem 0.2rem

</style>

页面效果图：页面中的a标签被替换成了div元素

上面讲的页面之间的跳转都是没有携带参数的，如果用户在页面跳转的同时要携带参数应该怎么处理呢？接下来我会改造一下list页面和detail页面来详细的讲解一下参数的传递和接收方法

直接在router-link组建中通过to来传递

<template>
  <ul class="list-page">
    <router-link :to="{name:'Detail',params:{id:item.id,name:item.name}}" tag="li" v-for="item in list" :key="item.id" id="item.id">{{item.name}}</router-link>
  </ul>
</template>

<script>
  export default {
    name: 'List',
    data() {
      return {
        list: [
          {id:1,name:'苹果'},
          {id:2,name:'香蕉'},
          {id:3,name:'梨子'},
          {id:4,name:'菠萝'},
          {id:5,name:'哈密瓜'},
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .list-page
    font-size 0.26rem
    li
      height 0.7rem
      line-height 0.7rem
      background-color white
      border-bottom 1px solid #ececec
      padding-left 0.2rem

</style>

注意，如果to对象中用了params的话，则一定要在路由中提前定义好参数

detial页面接收参数写法如下：

<template>
  <div class="detail-page">
    <div class="item">
      <span>id:</span><span>{{this.$route.params.id}}</span>
    </div>
    <div class="item">
      <span>name:</span><span>{{this.$route.params.name}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Detail',
    data() {
      return {
        message: 'Welcome to Detail Page'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .detail-page
    font-size 0.26rem
    padding 0.2rem
    .item
      line-height 0.8rem
</style>

页面效果图如下：

我们也可以通过query来传递参数，则无需提前在router中定义好参数，如：

<router-link :to="{name:'Detail',query:{id:item.id,name:item.name}}" tag="li" v-for="item in list" :key="item.id" id="item.id">{{item.name}}</router-link>

detail页面接收：

通过js params跳转：

<template>
  <ul class="list-page">
    <li v-for="item in list" :key="item.id" :id="item.id" @click="goDetail">{{item.name}}</li>
  </ul>
</template>

<script>
  export default {
    name: 'List',
    data() {
      return {
        list: [
          {id:1,name:'苹果'},
          {id:2,name:'香蕉'},
          {id:3,name:'梨子'},
          {id:4,name:'菠萝'},
          {id:5,name:'哈密瓜'},
        ]
      }
    },
    methods:{
      goDetail(e){
        const id=e.currentTarget.getAttribute("id");
        const name=e.currentTarget.innerText;
        this.$router.push({
         /* 注意：如果使用params出传递参数的话要注意以下三点
         *  1.params一定要和页面组件的name值搭配
         *  2.一定要提前在route路由中定义好参数
         *  3.在detail页面接收参数通过this.$route.params.形式
         */
          name:'Detail',
          params:{id:id, name:name}
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .list-page
    font-size 0.26rem
    li
      height 0.7rem
      line-height 0.7rem
      background-color white
      border-bottom 1px solid #ececec
      padding-left 0.2rem

</style>

通过js query跳转：

<template>
  <ul class="list-page">
    <li v-for="item in list" :key="item.id" :id="item.id" @click="goDetail">{{item.name}}</li>
  </ul>
</template>

<script>
  export default {
    name: 'List',
    data() {
      return {
        list: [
          {id:1,name:'苹果'},
          {id:2,name:'香蕉'},
          {id:3,name:'梨子'},
          {id:4,name:'菠萝'},
          {id:5,name:'哈密瓜'},
        ]
      }
    },
    methods:{
      goDetail(e){
        const id=e.currentTarget.getAttribute("id");
        const name=e.currentTarget.innerText;
        this.$router.push({
         /* 注意：如果使用query传递参数的话要注意以下三点
         *  1.query一定要和页面组件的path值搭配
         *  2.在route路由中无需提前定义好参数
         *  3.在detail页面接收参数通过this.$route.query.形式
         */
          path:'detail',
          query:{id:id, name:name}
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .list-page
    font-size 0.26rem
    li
      height 0.7rem
      line-height 0.7rem
      background-color white
      border-bottom 1px solid #ececec
      padding-left 0.2rem

</style>