vue学习-part3动态路由与嵌套路由

动态路由

基本使用

使用 :参数名

 {
   path:"/weather/:city",
   name:"Weather",
   component: Weather
 }

组件实现

<template>
    <div>
        <h1>天气预报</h1>
        <h2>城市：{{city}}</h2>
        <h3>天气：{{cond_txt}}</h3>
        <h3>温度：{{cur_tmp}}</h3>
        <h3>风向：{{wind_dir}}</h3>
        <router-link to="/weather">Weather</router-link>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            cond_txt:"null",
            cur_tmp:0,
            wind_dir:"null",
            city:"null"
        }
    },
    async beforeMount() {
        let  key = 'a5108355b8df4ed984e8797c6e5f1079';
        let httpUrl = `https://free-api.heweather.net/s6/weather/now?location=${this.$route.params.city}&key=${key}`
        let res = await axios.get(httpUrl)
        // console.log(res);
        let data = res.data;
        let basic = data.HeWeather6[0].basic;
        this.city = basic.location;
        let now = data.HeWeather6[0].now;
        this.cond_txt = now.cond_txt;
        this.cur_tmp = now.tmp;
        this.wind_dir=now.wind_dir;
    },
}
</script>

测试

嵌套路由

基本使用

使用children[]

{
    path:'/bignews',
    component:BigNews,
    children:[
      {
        path:'video',
        component:VideoView
        // 可以继续嵌套
        // children:[]
      },
      {
        path:'text',
        component:TextView
      },{
        path:'image',
        component:ImageView
      }
    ]

  }

组件实现

<template>
    <div>
        <h1>这是一些大新闻</h1>
        <!-- 内部嵌套子路由必须添加此标签 -->
        <router-view></router-view>
    </div>
</template>

测试