温岭专业自适应网站建设,如何做好网络营销管理,win10 wordpress安装,wordpress postgres一、概念
1、组成 每一个路由都由 key 和 value 组成。 keyvalue路由 route。 2、本质
路由的本质#xff1a;一个路由表达了一组对应关系。路由器的本质#xff1a;管理多组对应关系。
3、路由的工作原理
点击之后路径变化——路由器监视到变化——根据路径… 一、概念
1、组成 每一个路由都由 key 和 value 组成。 keyvalue路由 route。 2、本质
路由的本质一个路由表达了一组对应关系。路由器的本质管理多组对应关系。
3、路由的工作原理
点击之后路径变化——路由器监视到变化——根据路径匹配路由——完成切换
4、路由器的工作原理
不停的监视路径的变化只要路径变化路由器就会找到相应的路由完成切换。
二、简单使用形式
1、安装 vue-router 安装vue-router插件npm i vue-router3。 2、main.js 中引入并使用 vue-router
导入import VueRouter from vue-router使用Vue.use(VueRouter)
new Vue 时添加新的配置项一旦使用了 vue-router 插件添加一个全新的配置项router。
import Vue from vue
import App from ./App.vueVue.config.productionTip false//导入router插件
import VueRouter from vue-router
//导入路由对象
import router from ./router/index
//使用插件
Vue.use(VueRouter)
new Vue({el: #app,router: router,render: h h(App)
})3、使用路由 router 路由器的创建一般放在一个独立的 js 文件中 在独立的js中创建路由器对象并且将其暴露。然后在 main.js 文件中引入该路由器即可。
//导插件
import VueRouter from vue-router;
//导组件
import HB from ../components/HB
import HN from ../components/HN
import CZ from ../components/CZ
import SJZ from ../components/SJZ
// 创建路由
const router new VueRouter({//配置多个路由routes: [{path: /hb,component: HB,children: [{path: cz,component: CZ},{path: sjz,component: SJZ}]},{path: /hn,component: HN}]
})
// 暴露路由
export default router 4、在App.vue 中使用 router-link 标签代替 a 标签
templatedivdivh1省份/h1ul!-- 如果使用的是路由方式就不能使用超链接a标签了需要使用vue-router插件提供的一个标签 --!-- router-link 将来会被自动编译为a标签。 --lirouter-link to/hb active-classselected河北省/router-link/lilirouter-link to/hn active-classselected河南省/router-link/li/ul/div!-- 路由视图其实就是起到一个占位的作用。 --keep-alive :include[HB, HN]router-view/router-view/keep-alive/div
/template
5、激活样式属性 使用 active-class 属性在激活时添加样式 lirouter-link to/hn active-classselected河南省/router-link/li 6、指定组件的存放位置 路由视图起到占位的效果 router-view/router-view 7、路由组件的两个属性 $route属于自己的路由对象。 $router多组件共享的路由器对象。 8、多级路由的使用 const router new VueRouter({//配置多个路由routes: [{path: /hb,component: HB,children: [{path: cz,component: CZ},{path: sjz,component: SJZ}]},{path: /hn,component: HN}]
}) 注意children里面的path属性不能加“/” 9、路由query的传参 目的是提高代码复用性 路由对象中有一个query属性这个query属性可以接收query方式传递过来的数据。 this.$route.query ①直接传参 lirouter-link to/hebei/city?a1长安区a2裕华区a3新华区 active-classselected石家 庄 /router-link
/li
lirouter-link to/hebei/city?a1新华区a2运河区a3东光区 active-classselected沧州 /router-link
/li ②采用query方式传参字符串拼接方式 lirouter-link :to/hebei/city?a1${sjz[0]}a2${sjz[1]}a3${sjz[2]} active-classselected石家庄/router-link
/li
lirouter-link :to/hebei/city?a1${cz[0]}a2${cz[1]}a3${cz[2]} active-classselected邯郸/router-link
/li data() {return {sjz : [长安区3, 裕华区2, 新华区2],cz : [运河区, 新华区, 东光区]}
}, ③采用query方式传参使用对象形式
lirouter-link active-classselected :to{path : /hebei/city,query : {a1 : sjz[0],a2 : sjz[1],a3 : sjz[2],}} 石家庄/router-link
/li data() {return {sjz : [长安区, 裕华区, 新华区],cz : [运河区, 新华区, 东光区]}
}, 10、params传参 liparams方式传参字符串形式写死的字符串 --router-link active-classselected to/hebei/sjz/裕华区/新华区/长安区石家庄/router-link/li params方式传参字符串形式拼接字符串
lirouter-link active-classselected :to/hebei/sjz/${sjz[0]}/${sjz[1]}/${sjz[2]}石家庄/router-link
/li params方式传参对象形式
lirouter-link active-classselected :to{// 强调如果使用的是params方式传参这里只能使用name不能使用pathname : shi,params : {a1 : sjz[0],a2 : sjz[1],a3 : sjz[2],}}石家庄/router-link
/li 11、路由的props props 配置主要是为了简化 query 和 params 参数的接收。让插值语法更加简洁。 ①不是动态数据将对象中的key和value通过props传给shi组件。 props : {x : 张三,y : 李四
} li{{x}}/li
li{{y}}/li
export default {props:[x,y]
}
②函数式方式
props($route){ return {a1 : $route.params.a1,a2 : $route.params.a2,}
}
注:$route将来会被自动传过来它代表了当前的路由对象。变量名随意的。
li{{a1}}/li
li{{a2}}/li
export default {props:[a1,a2]
}
12、栈的存储方式
push模式默认以追加的方式入栈。replace模式以替换栈顶元素的方式。
开启replace模式
router-link :replace”true”/
router-link replace /
13、缓存路由组件 默认情况下路由切换时路由组件会被销毁。有时需要在切换路由组件时保留组件缓存起来 keep-alive inclue”组件名称”router-view/
/keep-alive 不写 include 时router-view包含的所有路由组件全部缓存。多个路由采用数组形式。
14、两个钩子函数(activated 和 deactivated)
只有“路由组件”有这两个生命周期钩子函数。
路由组件被切换到的时候activated 被调用。 路由组件被切走的时候deactivated 被调用。 作用是捕获路由组件的激活状态。 三、路由守卫
1、全局前置守卫 router/index.js 文件中拿到 router 对象。 router.beforeEach((to, from, next){-- to from next --
}) to是从哪来(to.path,to.name)from从哪来next调用next()。 2、全局后置路由 router.afterEach((to, from){ //每次后寓意每一次切换路由后执行。// 没有 nextdocument.title to.meta.title // 通常使用后置守卫完成路由切换时 title 的切换。
}) 初始化时执行一次以后每一次切换路由之后调用一次。 3、局部路由守卫之 path 守卫 beforeEnter(to, from, next){let loginName adminif(loginName admin){next()}else{alert(对不起您没有权限)}}, 没有afterEnter 4、局部路由守卫值component守卫 进入路由组件之前必须是路由组件才能触发普通组件不触发。 beforeRouteEnter(to, from, next){console.log(city)next()}, 离开路由组件之后必须是路由组件才能触发普通组件不触发。 beforeRouteleave(to, from, next){console.log(city)next()}, 只有路由组件才有这两个钩子
