Vue(路由器、导航卫士、插槽槽)--第三次修补周边时,把之前做过的场景拿出来,看看哪些地方可以优化,哪些地方可以做得更好。
最编程
2024-03-14 19:38:30
...
第三步我当时自己用vue做一个自己的资讯网站,数据传递推翻了两次,都是做到一半发现太冗余,数据传递太麻烦直接重做,第三次才定下来。然而现在我又觉得要推翻重做,虽然网站数据传递基本实现了,但还是有很多问题,所以准备再做一遍,就当是加深理解了。
Vue
1,npm install --save vue-resource
2.<router-link to="/helloworld">helloworld</router-link>
3.使用props绑定静态数据
【1】这种方法用于传递字符串,且值是写在父组件自定义元素上的。
【2】下面示例中的写法,不能传递父组件data属性中的值
【3】会覆盖模板的data属性中,同名的值。
【4】可以使用required选项来声明这个参数是否必须传入。
当未传入参数时( Missing required prop:)
4 vue获得数组索引
v-for="(user,index) in users" {{ index }}
5.Vue路由器
<!-- named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
5vue命名路由
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>//
name属性对应routes的对象的name属性
router.push({ name: 'user', params: { userId: 123 }})//
在这两种情况下,路由器都将导航到路径/user/123。
6vue跳到指定路由
this.$router.push({ name: 'RegandLog', params: { id: 'admincenter' }});
7vue路由钩子函数(//router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards)
在全局注册
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
在路由(route.js)注册
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
在组件中注册,可以使用以下选项直接在路径组件(传递给路由器配置的组件)中定义路径导航保护:
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
beforeRouteEnter (to, from, next) {
// called before the route that renders this component is confirmed.
// does NOT have access to `this` component instance,
// because it has not been created yet when this guard is called!
},
8.slot
子件
<template>
<div class="hell"
<div class="header"><slot name=“a”>默认值</slot></div>
<div class="content"><slot name="b">默认值</slot></div>
</div>
</template>
父件
<template>
<hell>
<div slot="a">sdgdhj</div>
<div slot="b">werwr</div>
</hell>
</template>
上一篇: Vue2 (IV) 动态组件插槽路由
下一篇: 用默认插槽封装面包屑导航