脚本宝典收集整理的这篇文章主要介绍了vue-router和vuex,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
将vue-router和vuex进行整理,以便于查阅和加深记忆。
const routes=[
//点击主页展示home组件内容
{path:'/',component:Home},
{path:'/menu',component:Menu},
]
//实例化一个router
const router=new VueRouter({
routes,
mode:'history'
})
在vue实例中引用一下
new Vue({
el: '#app',
router,
})
//childern属性下面写配置
{
path: '/about', name: "aboutLink", redirect: '/about/contact', component: About, children: [
{
path: '/about/contact', name: "contactLink", redirect: '/person', component: Contact, children: [
{path: '/phone', name: "phoneLink", component: PhoneNumber},
{path: '/person', name: "personLink", component: PesonName},
]
},
{path: '/history', name: "historyLink", component: History},
{path: '/orderingGuide', name: "orderingGuideLink", component: OrderingGuide},
{path: '/delivery', name: "deliveryLink", component: Delivery},
]
},
//添加name属性,在路由中定义多个组件
components: {
default:Home,//设置默认Home组件
'orderingGuide':OrderingGuide,
'delivery':Delivery,
'history':History
}
router.beforeEach((to, from, next) => {
// 此处写条件
//to:即将要进入的路由目标对象
//from:当前导航正离开的路由
//next:调用的方法
})
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
next(vm => {
// 通过 `vm` 访问组件实例
})
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
以上是脚本宝典为你收集整理的vue-router和vuex全部内容,希望文章能够帮你解决vue-router和vuex所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。