vue-router 进阶

vue-router 进阶

vue-router 进阶
1.动态路由
url中路由是改变的，但是改变路由公用一个组件

举例：

http://localhost:8080/category/detail/001?a=1&b=1
http://localhost:8080/category/detail/002?a=2&b=2
http://localhost:8080/category/detail/003?a=3&b=3
页面中的配置：

<router-link class=“nav-link " active-class=‘active’ href=”#"

:to="{name:‘detail’,params:{id:‘001’},query:{a:1,b:1}}" //在router-link标签里面设置

数码
路由配置（这里是二级路由）

{
​ path: ‘/category’,
​ component: Category,
​ children: [{
​ path: ‘detail/:id’, //:id表示可以匹配/category后的所有参数,
​ //举例：http:localhost:8080/category/001?a=1&b=2hash=3 那么:id就代表001开始往后的部分
​ component: Detail,
​ name: ‘detail’ //这里是命名路由
​ }]
​ },
注意：由于动态路由url中会携带参数 可以用于发送数据请求 来获取对应的数据

那么在组件中如何获取url中携带的参数？

在vue生命周期created中来获取数据 在vue的实例对象中存在$router里面的params，query属性就是url中的值

id:{{$route.params.id}}

query.a:{{$route.query.a}}

query.b:{{$route.query.b}}

案例:

获取堆糖网站上的信息渲染到页面

首先在项目中创建vue.config.js （用来做前端的反向代理）

module.exports = {
​ devServe: {
​ proxy: {
​ ‘/napi’: {
​ target: ‘https://m.duitang.com’,
​ changeOrigin: true
​ }
​ }
​ }
}
利用axios请求网站上的数据（注意引入axios组件）

现在入口文件设置全局axios

import axios from ‘axios’
Vue.prototype.$http = axios

最后在zxh上接受数据渲染到页面

• 点赞量：{{ list.favorite_count }}

  \\随便取数据渲染到页面

  msg: {{ list.msg }}

2.路由懒加载
由于每次点击都相当于发起一次请求 极大增加了浏览器的性能，所以需要使用懒加载来减少请求的次数

在路由配置文件中设置

const Home = () => import(/* webpackChunkName: “group-foo” */ ‘…/pages/Home.vue’)
这种形式的导入模块方式就是路由懒加载