vue.js 路由（三)

路由原理图

页面跳转传参

回顾

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

路由传参

两种方式：

query 传参（查询字符串）。 适用场景：页面搜索 https://juejin.cn/search?query=vue

params 传参。 适用场景：详情页 https://juejin.cn/post/6977259197566517284

 你要浏览的是:  {{ $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

源码下载地址：

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dd9aa05c-e357-4d7c-8d53-2c40c0818169/25a9ce11-9eaa-487b-8220-4e1ef7724ba2.zip

运行前，先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方法、全局配置

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

路由作业

中国城市查询APP

要求：

首页：

通过接口，展示全国一级城市。点击某省，进入省级内容页。

首页要有搜索功能，输入省名，进行搜索，在省级页显示。

省级页：通过接口，展示该省下的所有市级城市。点击某市，进入市级内容页。

市级页：通过接口，展示该市下的所有县区级城市。

所有页面要有标题（以组件形式）。省、市页面要有返回上一页的按钮

原文：https://juejin.cn/post/7101958159815671845