day8 路由

路由

1. Vues是单页面应用。
2. 路由两种模式。history模式，后端需要操作，返回首页。首页是这样的。
   

另一种模式，不需要配置，首页是这样的，多了个/#/

3. router-link就相当于一个a标签。
   

4. 配置路径。一个页面的大组件，放在views下面。
   
   在router/index.js里引入组件
   
   配置路径
   

5. 编程式导航，跳转到path
   

动态路由

1. 输入news+id可以拿到id
   
   
   path配置需要加:id
   
   新闻页面组件可以这样拿到id
   

2. 查询天气页面。
   导入组件。
   
   添加页面路径。
   
   编写天气组件。包括异步调用和风天气API。

<template>
    <div>
        <h1>天气</h1>
        <h2>城市：{{city}}</h2>
        <h3>穿衣指数：{{chuanyi}}</h3>
        <h3>风向：{{xiche}}</h3>
        <router-link to='/about'>进入about页面</router-link>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            city:null,
            chuanyi:null,
            xiche:null
        }
    },

    async beforeMount(){
    let key = '81d31a317f9c48e5b2d10e8e0c4a2734';
    let httpUrl = `https://free-api.heweather.net/s6/weather/lifestyle?location=${this.$route.params.city}&key=${key}`;
    let res = await axios.get(httpUrl)
    let data = res.data
    this.city = data.HeWeather6[0].basic.location;
    this.chuanyi = data.HeWeather6[0].lifestyle[1].txt;
    this.xiche = data.HeWeather6[0].lifestyle[6].txt;
    console.log(res)
    }
}
</script>

访问路径城市，弹出天气。

3. 路由监听。跳转时输出路由更改。
   
4. 嵌套路由。在路由中写子路由。
   首先路径写好。
   
   导入组件。
   

父组件bignews

效果。

命名视图和组件传参

1. 通过路径跳转。
2. 通过名字跳转。如果有id参数，要设置params参数。
   
3. query就是问号后面的内容，也可以拿到。
   
4. 用replace方法，后退不会回到首页。用push可以回来。
5. 前进和后退，里面数字是前进或者后退的步数。
   
6. 命名视图
   app.vue页面下面有多个路由视图。通过名字区分。
   
   路由配置，引入组件。
   

主页。

7. 重定向。访问/a，跳转到/about。

还可以设置函数。query里面的内容是about的时候，跳转到about。否则去news页面。

1. 别名。这两个路径显示的是同一个页面。别名会显示在路径栏上。
   
2. 组件传参。
   路由配置，props设置为true。他就会把id传进去。
   
   组件这边要接收id。
   

用函数设置。 return就是我们获取输入，然后传出的值。

在子组件里面接收。

10. 页面都找不大，配置404页面。
    

History模式

1. 没有#的那种。后端需要配置。