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’)
这种形式的导入模块方式就是路由懒加载

vue-router 进阶相关推荐

【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效即 ...
你可能不清楚的 Vue Router 深度用法（一）
Vue Router 简单易上手,能实现大部分的需求.但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容.第一章为路由元信息用途挖掘. 路由元信息用途 ( ...
vue router html,vue-router.html
Document Hello App! Go to Foo Go to Bar // 1. 定义(路由)组件. // 可以从其他文件 import 进来 const Foo = { template: ...
Vue.js 从 Vue Router 0.7.x 迁移
从 Vue Router 0.7.x 迁移只有 Vue Router 2 是与 Vue 2 相互兼容的,所以如果你更新了 Vue ,你也需要更新 Vue Router .这也是我们在主文档中将迁移路 ...
你可能不清楚的 Vue Router 深度用法（二）
此为 Vue Router 深度用法的第二篇,主要讲述动态路由匹配用法.第一篇的链接在此: https://segmentfault.com/a/11... 动态路由匹配是用于把某种模式匹配到的所有路 ...
vue router html后缀,vue-router.html
Document Hello App! Go to Foo Go to Bar // 1. 定义(路由)组件. // 可以从其他文件 import 进来 const Foo = { template: ...

vue-router 进阶

vue-router 进阶

vue-router 进阶相关推荐

最新文章

热门文章