前端技术面试之VueRouter

ue路由器

路由初体验

安装

<pre class="hljs sql" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">npm install --save vue-router
复制代码</pre>

使用

router.js 路由配置

<pre class="prettyprint hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">@ 如果你的Vue-Cli 是 3 的版本，可以在创建项目的同时，可以选择安装router 插件
vue ui

创建好项目，自带的router文件就是路由配置文件

import Vue from 'vue'
// 引入 vue-router
import VueRouter from 'vue-router'
import Father from '../views/Father.vue'

在全局使用这个vue-router
Vue.use(VueRouter)
配置路由选项
const routes = [
{
path: '/',
name: 'Father',
component: Father,
meta: {
keepAlive: true // 需要缓存
}
}
]
创建Vue-router实例，挂载router配置项
const router = new VueRouter({
routes
})

4.最后导出 Vue-router实例，提供给 Vue 挂载使用
export default router

复制代码</pre>

index.js Vue入口文件配置

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">import Vue from 'vue'
import App from './App.vue'

引入路由配置文件
import router from './router'
import store from './store'

Vue.config.productionTip = false

将路由挂载到 Vue实例中使用。
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

复制代码</pre>

动态路由传递参数

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">const routes = [
{
1. 通过在url后：参数即可
path: '/home/:name',
name: 'home',
component: Father,
meta: {
keepAlive: true // 需要缓存
}
}
]

2.接收路由参数： this.$route.params.路由参数
复制代码</pre>

捕获404页面

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：

this.$route.params.pathMatch 来获取通配符后的url
复制代码</pre>

嵌套路由

页面中使用通过 <router-link to="/父路由path/嵌套path">小红</router-link>
3. 配置显示入口 <router-view></router-view>

{
path: '/teacher',
name: 'teacher',
component: () => import('../views/Teacher/Teacher.vue'),
children: [
{
path: 'xiaohong',
component: () => import('../views/Teacher/XiaoHong.vue')
},
{
path: 'xiaoming',
component: () => import('../views/Teacher/XiaoMing.vue')
}
]
}
复制代码</pre>

image

编程式导航

导航分为：

router.push 来实现编程式导航

<router-link> 声明式导航创建标签来定义导航链接

router.push 会向历史记录栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。

`router.push`

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: /user/${userId} }) // -> /user/123
复制代码</pre>

`router.replace`

它不会向历史添加新记录，它会替换当前路径

<pre class="prettyprint hljs vbscript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">1.声明式写法
<router-link :to="..." replace>

2.编程式写法
router.replace(...)
复制代码</pre>

`router.go(n)`

路由的前进和后退，前进合并整数，后退预定负数

命名路由

所谓命名路由，给路由配置名称属性，然后在页面中也可以使用 this.$router.push({ name: 'home'，{params:name='Test'}}) 进行路由转换传递参数，很方便。

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">const routes = [
{
path: '/home:name',
name: 'home',
component: Father,
}
]

1 通过命名路由来实现路由跳转和传递参数
this.$router.push({ name: 'home'，{params:name='Test'}})
复制代码</pre>

重新重定向

重定向的目标也可以是一个命名的路由： redirect: { name: 'foo' }
复制代码</pre>

路由守卫

以以着（或）者（其），（、、、、、、、、、、、、（，），定向到登陆页。

<pre class="prettyprint hljs ruby" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">
router.beforeEach((to, from, next) => {
//我在这里模仿了一个获取用户信息的方法
let isLogin = window.sessionStorage.getItem('userInfo');
if (isLogin) {
//如果用户信息存在则往下执行。
next()
} else {
//如果用户token不存在则跳转到login页面
if (to.path === '/login') {
next()
} else {
next('/login')
}
}
})
复制代码</pre>

路由过渡特效

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">1.给路由入口加入 transition

实现不同的过渡特效，组件内使用 <transition> 并设置不同的 name。
<transition name="long">
<div class="main">...</div>
</transition>
复制代码</pre>

路由懒加载

官方：当打包发展应用时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

const Foo = () => import(/* webpackChunkName: "group-foo" / './Foo.vue')
const Bar = () => import(/ webpackChunkName: "group-foo" / './Bar.vue')
const Baz = () => import(/ webpackChunkName: "group-foo" */ './Baz.vue')

在 router 文件中正常使用就可，使用 chunk name 来赋值 component
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }，
{ path: '/bar', component: Bar }，
{ path: '/baz', component: Baz }
]
})

复制代码</pre>

一、搜索QQ群，前端学习交流群：1093606290

二、https://jq.qq.com/?_wv=1027&k=MlDBtuEG

三、

image