路由守卫面试题（路由守卫vue）

科技前沿 • 2025-05-16 07:42 • 阅读 45

大家好，我是讯享网，很高兴认识大家。

//子组件
<template>
<slot />
</template>

//父组件
<Child>
<div>默认插槽</div>
</Child>

//子组件
<template>
<slot name=“content”></slot>
</template>

//父组件
<Child>
<template v-slot:content>具名插槽内容</template>
</Child>

<li>商品价格：{{item.price | filterPrice}}</li>

filters: { filterPrice (price) { return price ? (‘￥’ + price) : ‘–’ } }

讯享网

<input v-model=“message” />
等同于
<input
:value=“message”
@input=“message=\(event.target.value"<br>></p><blockquote></blockquote><p><div v-example:foo.bar="baz"></p><p>{<br> arg: 'foo',<br> modifiers: { bar: true },<br> value: /* `baz` 的值 */,<br> oldValue: /* 上一次更新时 `baz` 的值 */<br> }</p><p><template><br> <div>{{ addSum }}</div><br> <div>{{ addSum }}</div><br> <div>{{ addSum }}</div><br></template><br><script setup><br>import { computed, ref, watch } from "vue";<br>const a = ref(1)<br>const b = ref(2)<br>let addSum = computed(() => {<br> console.log('内部逻辑执行')<br> return a.value + b.value<br>})<br></script></p><p>Vue2(选项式 API)Vue3(setup)描述beforeCreate-实例创建前created-实例创建后beforeMountonBeforeMountDOM 挂载前调用mountedonMountedDOM 挂载完成调用beforeUpdateonBeforeUpdate数据更新之前被调用updatedonUpdated数据更新之后被调用beforeDestroyonBeforeUnmount组件销毁前调用destroyedonUnmounted组件销毁完成调用</p><p>graph TD<br>父beforeCreate --> 父created --> 父beforeMount --> 子beforeCreate --> 子created --> 子beforeMount --> 子mounted --> 父mounted</p><p>graph TD<br>父beforeUpdate --> 子beforeUpdate --> 子updated --> 父updated</p><p>graph TD<br>父beforeDestroy --> 子beforeDestroy --> 子destroyed --> 父destroyed</p><blockquote></blockquote><p>const router = new VueRouter({<br> routes: [{ path: "/list", component: () => import("@/components/list.vue") }],<br>});</p><p>window.onhashchange = function (event) {<br> console.log(event.oldURL, event.newURL);<br> let hash = location.hash.slice(1);<br>};</p><p><IfModule mod_rewrite.c><br> RewriteEngine On<br> RewriteBase /<br> RewriteRule ^index.html\) - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

location / {
try_files \(uri \)uri/ /index.html;
}

方式Vue2Vue3父传子propsprops子传父\(emitemits父传子\)attrsattrs子传父\(listeners无(合并到 attrs 方式)父传子provide/injectprovide/inject子组件访问父组件\)parent无父组件访问子组件\(children无父组件访问子组件\)refexpose&ref兄弟组件传值EventBusmitt

路由守卫面试题（路由守卫vue）

相关推荐