vue框架页面跳转和url传参

页面跳转

1，点击跳转

1.1可以使用button和span等标签

<router-link to='/spotslist'><button>更多</button></router-link>
 <router-link to='/spotslist'><span>更多</span></router-link>

1.2配置：index.js里面

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Panda from '@/components/panda'
import Spotslist from '@/components/spotslist'
// import Hotellist from '@/components/hotellist'
import Spots from '@/components/spots'
import Hotel from '@/components/hotel'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '首页',
      component: Panda
    },
    {
      path: '/HelloWorld',
      name: '测试页面',
      component: HelloWorld
    },
    {
     path: '/spotslist',
       name: '景点列表',
      component: Spotslist
    },
    // {
    //   path: '/hotellist',
    //   name: '酒店列表',
    //   component: Hotellist
    // },
    {
      path: '/spots/:id',
      name: '景点详情',
      component: Spots
    },
    {
      path: '/hotel/:id',
      name: '酒店详情',
      component: Hotel
    }
  ]
})

1.3：vue页面

2. 点击触发方法后跳转

2.1

<li @click="getspotlist()">
                    更多>>
                  </li>

2.2method跳转方法

getspotlist(){
      this.$router.push({
        path: `/spotslist`,
      })
    }

2.3如1所示部署

url传参

==和上面的2类似！！

 <li class="active" v-for="item in typelist"  @click="selectHotel(item.htid)">
                    <a>{{item.htname}}</a>
                  </li>

方法上：

getspots(id) {  //url传参
       this.$router.push({
         path: `/spots/${id}`,   //这个是tab键上面那个键（如果‘’不行就用tab键上面那个键）
       })
     },

配置上：

{
      path: '/spots/:id',
      name: '景点详情',
      component: Spots
    },

spots页面接收参数
this.$route.params.id

 mounted: function () {
        let that = this
        axios.get(config.dataserver + 'spots/getdatabyid?spotid='+this.$route.params.id).then(res =>{
          that.spot = res.data
          console.log(res.data)  //显示得到的数据
        })

传参也可以传多个参数哦！！！！

v的小标签使用

v-html 将数据以html格式解析

v-for 遍历 （v-for=“item in hotellist”）

将hotellist遍历，每一个元素的变量名为item

v-text 标签内的内容

{{}} 里面可以直接属性