[JavaScript知识库]前端面试题（5） 关于vue 路由方面的

1. 前端路由实现的原理？

? ? >> hash: hashchange 事件来监听 hash 值的变化，从而对页面进行跳转***
? ? >> history: ?
? ? ? ? ? pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；
? ? ? ? ? 我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
? ? ? ? ? history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转

2. router-link： 叫 声明式导航， 跳转页面的

3. router-view ?组件渲染的出口，没有router-view 组件就不显示

4.vue中router与route区别?

? ? $route:
? ? ? ? $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。
? ? $router：
? ? ? ? $router对象是全局路由的实例，是router构造方法的实例。

5. vue-router传递参数的方式有哪些？

? ?第一种： 通过 声明式 router-link内置组件 的to 属性 去跳页面 传参?

? ? ? ? <router-link to="/user/3">user3</router-link>
? ? ? ? <router-link :to="{ path:'/register', query:{ username:'kky999' ?} }">注册传参query</router-link>
? ? ? ? <router-link :to="{ name:'Register', params:{ username:'kky888' ?} }">注册传参params</router-link>

? 第二种： 通过编程式导航跳转 this.$router.push({})
? ? ? ??

? ? ? ? this.$router.push({
? ? ? ? ? ? ? name: "Register",
? ? ? ? ? ? ? params: {
? ? ? ? ? ? ? ? username: 666,
? ? ? ? ? ? ? ? id: 555,
? ? ? ? ? ? ? ? age: 20,
? ? ? ? ? ? ? },
? ? ? ? ? ? });

? ? ? ? this.$router.push({
? ? ? ? ? ? ? path: "/register",
? ? ? ? ? ? ? query: {
? ? ? ? ? ? ? ? username: 666,
? ? ? ? ? ? ? ? id: 555,
? ? ? ? ? ? ? ? age: 20,
? ? ? ? ? ? ? },
? ? ? ? ? ? });

第三种：?
? ? 路由组件传参

? ? ? 1.{ path: "/user/:id/:uname", component: User, props: true },
? ? ? 2.{
? ? ? ? ? ? path: "/user/:id/:uname",
? ? ? ? ? ? component: User,
? ? ? ? ? ? props: { username: "aaa", age: 18 },
? ? ? ? ? },
? ? ? 3. ? props: (route) => ({ username: "abc", age: 24 }),

? ? ? 如何获取：

? ? ? ? props: ["id", "username", "age"],

? ?

6.vuex和localstorage的区别

1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地

2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。

注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到，原因就是区别

?