vue.js 路由（三)- 路由传参 + 新闻网站开发案例路由传参 + 新闻网站开发案例路由传参 + 新闻网站开发案例路

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

路由原理图

页面跳转传参

回顾

html 页面之间如何传参？ =》url?key=val&key=val ?query=唐山港&hdq=sogou-wsse-b58ac8403eb9cf17-0003

路由传参

两种方式：

query 传参（查询字符串）。适用场景：页面搜索 juejin.cn/search?quer…
params 传参。适用场景：详情页 juejin.cn/post/697725…

 你要浏览的是: 
 {{ $route.query.serach }}  // query 传参
 {{ $route.params.id}}  //params 传参

query传参

路由定义

 const routes = [{
         path: '/', //搜索页
         component: () => import('@/pages/serach')
     },
     {
         path: '/result', //结果页路径
         component: () => import('@/pages/result')
     },
 
     {
         path: '*',
         component: () => import('@/pages/404')
     }
 ]

方法跳转

 <template>
 
     <div>
         关键词查询：<input type="text" v-model="serachWord"> 
         <button type="button" @click="serach()">提交</button>
         <!-- <ul>
             <li @click="goPage(1)">新闻标题</li>
             
         </ul> -->
 
     </div>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 serachWord: ''
             }
         },
         methods: {
             serach() {
                 this.$router.push("/result?serach=" + this.serachWord)
             }
         },
     }
 </script>
 
 <style>
 </style>

params传参

路由定义

 const routes = [{
         path: '/', //列表页
         component: () => import('@/pages/list')
     },
     {
         name:'result',
         path: '/result/:id', //结果页路径 // :id 动态传参
         component: () => import('@/pages/result')
     },
     {
         path: '*',
         component: () => import('@/pages/404')
     }
 ]

方法跳转

 <template>
     <div>
         <ul>
             <li @click="goResult(100)">商务软件</li>
             <li @click="goResult(200)" >生产软件</li>
             <li @click="goResult(300)">职能软件</li>
         </ul>
     </div>
 </template>
 
 <script>
     export default {
         methods: {
             goResult(id) {
                 this.$router.push({ name: 'result', params: { id }})
             }
         }
     }
 </script>
 
 <style>
     li {
         cursor: pointer;
     }
 </style>

案例练习

思路：

新闻网站开发者头条

页面结构首页->列表页->详情页

组件：顶部组件导航组件边栏组件

数据源：

Api列表 - MXNZP.COM 穆仙念，人到中年

app_id:nkz2cwitngkms0hu

app_secret:Mmh0UVRKWEFUUGFiR0lEeVJqTkM2dz09

源码下载地址：

vkceyugu.cdn.bspapp.com/VKCEYUGU-dd…

运行前，先npm install

Axios：

安装
```
 npm i axios
```

将axios挂在vue原型链上

 import axios from 'axios'
 Vue.prototype.$axios = axios

使用

 
 created() {
     this.$axios({
         url:'https://www.mxnzp.com/api/news/types?app_id=e3lbnyqgnvoorkcu&app_secret=ampYcGs2UUNIellvNlA0cStiaGlCQT09'
     }).then((res)=>{
         console.log(res);
     })
 }

axios 分离 config.js

 import axios from 'axios'
 // 定义一个全局的路径
 axios.defaults.baseURL = 'https://www.mxnzp.com/api/news/'; // 测试环境 api接口地址 正式
 // 定义了一个全局get请求参数
 axios.defaults.params = {
     app_id: 'nkz2cwitngkms0hu',
     app_secret: 'Mmh0UVRKWEFUUGFiR0lEeVJqTkM2dz09',
 }
 
 export default axios

axios 拦截器

 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
     
     console.log("我要发起请求了");
     return config;
   }, function (error) {
     // 对请求错误做些什么
     return Promise.reject(error);
   });
   
 // 添加响应拦截器
 axios.interceptors.response.use(function (response) {
    console.log("服务器给我响应了！！");
     return response;
   }, function (error) {
     // 对响应错误做点什么
     return Promise.reject(error);
   });

axios方法、全局配置

 // 定义一个全局的路径
 axios.defaults.baseURL = 'https://www.mxnzp.com/api/news/'; // 测试环境 api接口地址 正式
 // 定义了一个全局get请求参数
 axios.defaults.params = {
     app_id: 'nkz2cwitngkms0hu',
     app_secret: 'Mmh0UVRKWEFUUGFiR0lEeVJqTkM2dz09',
 }
 
 // 请求方式
 this.axios.get('list', {
 params: {
     typeId: this.typeId,
     page: 1
 }
 }).then((res) => {
     console.log(res);
     this.newsList = res.data.data
 })

路由作业

中国城市查询APP

要求：

首页：
1. 通过接口，展示全国一级城市。点击某省，进入省级内容页。
2. 首页要有搜索功能，输入省名，进行搜索，在省级页显示。
省级页：通过接口，展示该省下的所有市级城市。点击某市，进入市级内容页。
市级页：通过接口，展示该市下的所有县区级城市。
所有页面要有标题（以组件形式）。省、市页面要有返回上一页的按钮