1、Vue中怎么自定义过滤器(vue3不支持)
通过filter来定义过滤器，过滤器分为全局和局部过滤器，过滤器的主体为一个普通的函数，来对数据进行处理，可以传递参数。当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即:局部过滤器优先于全局过滤器被调用。
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在v-bind中 -->
<div v-bind:id="rawId formatId"></div>
filters: {
capitalize: function (value) [
if (!value) return ""
value = value .toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
Vue.filter('capitalize', function (value) {
if (!value) return ""
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
2、Vue单页面应用的优缺点
优点：
1、单页应用的内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
2、单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象。
3、单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
4、良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于web界面、手机、平板等多种客户端。
缺点：
1、首次加载耗时比较多。
2、SEO问题，不利于百度，360等搜索引擎收录。
3、容易造成css命名冲突。
4、前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。
3、Vue-router 使用params与query传参有什么区别
用法上：
query要用path来引入，params要用name来引入，接收参数都是类似的，分别是
this.$route.query和this.$route.params
展示上：
params是路由的一部分，必须要有。query是拼接在url后面的参数。
1、命名的路由，并加上参数，让路由建立 url/users/eduardo
router.push({ name:'user', params: {username: 'eduardo'} })2、带查询参数，结果是 /register?plan=private
router.push({ path:'/register', query: {plan: 'private'} })3、带hash，结果是 /about#team
router.push({path:'/about', hash:'#team' })
4、Vue中 keep-alive 的作用
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新染。一旦使用keepalive包裹组件，此时mouted，created等钩子函数只会在第一次进入组件时调用，当再次切换回来时将不会调用。此时如果我们还想在每次切换时做一些事情，就需要用到另外的周期函数，actived和deactived，这两个钩子函数只有被keepalive包裹后才会调用。
5、Vue如何实现单页面应用
通常的url 地址由以下内容构成:协议名 域名 端口号 路径 参数哈希值，当哈希值改变，页面不会发生跳转，单页面应用就是利用了这一点，给window注册onhashchange事件，当哈希值改变时通过location.hash就能获得相应的哈希值，然后就能跳到相应的页面。
1.hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则
2.history原理: 利用H5的 history中新增的两个API pushstate()和 replacestate() 和一个事件onpopstate监听URL变化
6、说出至少4种Vue当中的指令和它的用法?
- v-if(判断是否隐藏，用来判断元素是否创建)
- v-show(元素的显示隐藏，类似css中的display的block和hidden)
- v-for(把数据遍历出来)
- v-bind(绑定属性)
- v-model(实现双向绑定)
7、如何实现一个路径渲染多个组件?
可以通过命名视图(router-view)，它容许同一界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view 没有设置名字，那么默认为 default。通过设置components即可同时渲染多个组件。
<router-view class="view left-sidebar" name="Leftsidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="Rightsidebar"></router-view>
const router = createRouter({
history: createwebHashHistory(),
routes: [{
path: '/',
components: {
default: Home,
Leftsidebar,
//Leftsidebar: Leftsidebar 的缩写
//它们与 <router-view>上的 name 属性相配
Rightsidebar
}
}]
})
8、如何实现多个路径共享一个组件?
只需将多个路径的component字段的值设置为同一个组件即可。
const routes = [
{ path:'/', component: Home },
{ path:'/home', component: Home }
]
9、如何监测动态路由的变化
可以通过watch方法来对$route进行监听，或者通过导航守卫的钩子函数beforeRouteupdate来监听它的变化。
10、vue-router 中的 router-link上v-slot属性怎么用?
router-link 通过一个作用域插槽暴露底层的定制能力。这是一个更高阶的 API，主要面向库作者，但也可以为开发者提供便利，多数情况用在一个类似 NavLink 这样的自定义组件里。
有时我们可能想把激活的 class 应用到一个外部元素而不是 a标签 本身，这时你可以在一个 router-link 中包裹该元素并使用 v-slot 属性来创建链接。
<router-link to="/foo" custom v-slot="{ href, route, navigate, isActive, isExactActive }">
<li :class="[isActive && 'router-link-active', isExactActive && 'router-Tink-exact-active']">
<a :href="href" @click="navigate">{{ route.fullpath }}</a>
</li>
</router-link>
11、Vue如何除url中的#
将路由模式改为history。
由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问example.com/user/id，就会得… 404 错误。这就尴尬了。
不用担心:要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。
var history = require('connect-history-api-fallback');
app.use(history({
index: '/index.html'
})); //注意放在所有的接口后面
12、$route 和 $router 的区别
$route用来获取路由的信息的，它是路由信息的一个对象，里面包含路由的一些基本信息，包括name、meta、pathhash、query、params、fullPath、matched、redirectedFrom等。
而$router主要是用来操作路由的，它是VueRouter的实例，包含了一些路由的跳转方法push，go，replace，钩子函数等。
13、Vue路由守卫
vue-router 提供的导航守卫主要用来对路由的跳转进行监控，控制它的跳转或取消，路由守卫有全局的，单个路由独享的，或者组件级的。导航钩子有3个参数:
1、to:即将要进入的目标路由对象:
2、from:当前导航即将要离开的路由对象;
3、next : 调用该方法后，才能进入下一个钩子函数 (afterEach)。
router.beforeEach(async (to, from) => {
if (
//检查用户是否已登录
!isAuthenticated && to.name !== 'Login'
//避免无限重定向
) {
//将用户重定向到登录页面
return {
name: 'Login'
}
}
})
14、Vue路由实现的底层原理
在Vue中利用数据劫持defineproperty在原型prototype上初始化了一些getter,分别是router代表当前Router的实例 、 route 代表当前Router的信息。在install中也全局注册了router-view,router-link,其中的vue,util,defineReactive，这是Vue里面观察者劫持数据的方法，劫持 route，当_route触发setter方法的时候，则会通知到依赖的组件。
接下来在init中，会挂载判断是路由的模式，是history或者是hash,点击行为按钮，调用hashchange或者popstate的同时更_route，_route的更新会触发route-view的重新渲染。
写在最后
码字不易，谢谢关注、点赞和转发。
越笨拙，越努力； 越努力，越幸运； 大家加油!
