哪个网站做的win10系统,海口网站建设优化公司,建筑公司是做什么的,篇高端网站愿建设文章目录 1#xff0c;入门案例2#xff0c;一些细节高亮效果非当前路由会被销毁 3#xff0c;嵌套路由4#xff0c; 传递查询参数5#xff0c;命名路由6#xff0c;传递路径参数7#xff0c;路径参数转props8#xff0c;查询参数转props9#xff0c;replace模式10入门案例2一些细节高亮效果非当前路由会被销毁 3嵌套路由4 传递查询参数5命名路由6传递路径参数7路径参数转props8查询参数转props9replace模式10编程式导航11缓存路由组件12新生命周期13路由守卫 1入门案例
安装库。
npm install vue-router3准备三个组件。 App.vue AAA.vue BBB.vue
templatedivrouter-link to/aaaa/router-linkrouter-link to/bbbb/router-linkrouter-view //div
/templatetemplatedivAAA/div
/templatetemplatedivBBB/div
/template新建router.js。
import Vue from vue
import VueRouter from vue-router
import AAA from ./AAA.vue
import BBB from ./BBB.vueVue.use(VueRouter)const router new VueRouter({routes: [{ path: /a, component: AAA },{ path: /b, component: BBB }]
})
export default routermain.js。
import router from ./router.jsnew Vue({render: h h(App),router
}).$mount(#app)效果 2一些细节
高亮效果
router-link的active-class属性指定当前路由链接的高亮类名。
templatedivrouter-link to/a active-classabcaaa/router-linkrouter-link to/b active-classabcbbb/router-linkrouter-view //div
/template
style
.abc {color: red;
}
/style非当前路由会被销毁
templatedivAAA/div
/template
script
export default {beforeDestroy() {console.log(1);}
}
/script3嵌套路由
AAA内还有CCC和DDD。
二级路由链接要从一级开始写 配置项无须加斜线。
templatedivrouter-link to/aaaa/router-linkrouter-link to/bbbb/router-linkrouter-view //div
/templatetemplatedivrouter-link to/a/cccc/router-linkrouter-link to/a/dddd/router-linkrouter-view //div
/templatetemplatedivBBB/div
/templatetemplatedivCCC/div
/templatetemplatedivDDD/div
/templaterouter.js。
import Vue from vue
import VueRouter from vue-router
import AAA from ./AAA.vue
import BBB from ./BBB.vue
import CCC from ./CCC.vue
import DDD from ./DDD.vue
Vue.use(VueRouter)const router new VueRouter({routes: [{path: /a, component: AAA,children: [{path: c, component: CCC}, {path: d, component: DDD}]},{ path: /b, component: BBB }]
})
export default router4 传递查询参数
发送。
templatedivrouter-link to/a?id123aaa/router-linkrouter-link to/a?id124aaa/router-linkrouter-link to/bbbb/router-linkrouter-view //div
/template接收。
templatedivAAA{{ $route.query.id }}/div
/template发送的第二种写法。
templatedivrouter-link :to{path: /a,query: {id: 123}}aaa/router-linkrouter-link to/a?id124aaa/router-linkrouter-link to/bbbb/router-linkrouter-view //div
/template5命名路由
给路由起个名字。
import Vue from vue
import VueRouter from vue-router
import AAA from ./AAA.vue
import BBB from ./BBB.vueVue.use(VueRouter)const router new VueRouter({routes: [{ path: /a, component: AAA, name: a },{ path: /b, component: BBB, name: b }]
})
export default router跳转时传递名称。
templatedivrouter-link :to{name: a}aaa/router-linkrouter-link :to{name: b}bbb/router-linkrouter-view //div
/template6传递路径参数
发送。
templatedivrouter-link to/a/123aaa/router-linkrouter-link to/a/124aaa/router-linkrouter-link to/bbbb/router-linkrouter-view //div
/template配置。
import Vue from vue
import VueRouter from vue-router
import AAA from ./AAA.vue
import BBB from ./BBB.vueVue.use(VueRouter)const router new VueRouter({routes: [{ path: /a/:id, component: AAA },{ path: /b, component: BBB }]
})
export default router接收。
templatedivAAA{{ $route.params.id }}/div
/template7路径参数转props
启用props会将所有路径参数通过props传递给组件。
import Vue from vue
import VueRouter from vue-router
import AAA from ./AAA.vue
import BBB from ./BBB.vueVue.use(VueRouter)const router new VueRouter({routes: [{ path: /a/:id, component: AAA, props: true },{ path: /b, component: BBB }]
})
export default router组件要声明该props。
templatedivAAA{{ id }}/div
/template
script
export default {props: [id]
}
/script8查询参数转props
props写成函数。
import Vue from vue
import VueRouter from vue-router
import AAA from ./AAA.vue
import BBB from ./BBB.vueVue.use(VueRouter)const router new VueRouter({routes: [{path: /a, component: AAA, props(route) {return {id: route.query.id}}},{ path: /b, component: BBB }]
})
export default router9replace模式
替换掉之前的路由而不是压栈。
templatedivrouter-link to/a replaceaaa/router-linkrouter-link to/b replacebbb/router-linkrouter-view //div
/template10编程式导航
代码进行跳转。
templatedivdivAAA/divbutton clickadd按钮/button/div
/template
script
export default {methods: {add() {this.$router.push(/b)}},
}
/script参数可以是对象与前面route-link的to用法一致。
11缓存路由组件
不销毁。
keep-aliverouter-view /
/keep-alive12新生命周期
不销毁的时候激活与失活。
templatedivdivAAA/div/div
/template
script
export default {activated() {console.log(1);},deactivated() {console.log(2);},
}
/script13路由守卫
