前端高级面试题2024，两万字Vue基础知识总结，小白零基础入门，大厂面经合集

（3）About.vue

我是关于

我是关于内容, 呵呵呵

（4）main.js

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

Vue.config.productionTip = false

new Vue({

el: ‘#app’,

router,

render: h => h(App)

})

（5）index.js

// 配置路由相关的信息

import VueRouter from ‘vue-router’

import Vue from ‘vue’

import Home from ‘…/components/Home’

import About from ‘…/components/About’

// 1.通过Vue.use(插件), 安装插件

Vue.use(VueRouter)

// 2.创建VueRouter对象

const routes = [

{

path: ‘’,

// redirect重定向

redirect: ‘/home’

},

{

path: ‘/home’,

component: Home

},

{

path: ‘/about’,

component: About

}

]

const router = new VueRouter({

// 配置路由和组件之间的应用关系

routes,

mode: ‘history’,

linkActiveClass: ‘active’

})

// 3.将router对象传入到Vue实例

export default router

（6）浏览器展示

四、router-link的其它属性补充

---

1. tag：tag可以指定router-link之后渲染成什么组件，比如，此时就是一个button了；

2. replace：增加replace属性，就相当于replaceState；

3. class：可以为标签增加样式，比如选中的会自动赋值router-link-active；

4. active-class=“active”：选中的；也可以在router组件中配置linkActiveClass: ‘active’；

通过代码跳转路由：

五、vue-router动态路由的使用

---

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望路径中存在用户id，这种path和Component相互匹配的关系，我们称之为动态路由，也是路由传递数据的一种方式。

this.$route表示正在活跃的路由。

获取路径中的姓名：

…

用户

…

我是用户界面

我是用户的相关信息, 嘿嘿嘿

{{userId}}

{{$route.params.id}}

<button @click=“btnClick”>按钮

六、vue-router打包文件的解析

---

七、路由懒加载

---

1、什么是懒加载

当打包构建应用时，JavaScript包会变得非常大，影响页面加载。

如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

2、懒加载的方式

（1）结合Vue的异步组件和Webpack的代码分析

const Home = resolve => { require.ensure([‘…/components/Home.vue’],

() => { resolve(require(‘…/components/Home.vue’)) })};

（2）amd写法

const About = resolve => require([‘…/components/About.vue’], resolve);

（3）在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割

const Home = () => import(‘…/components/Home.vue’)

3、代码实例

index.js

// import Home from ‘…/components/Home’

// import About from ‘…/components/About’

// import User from ‘…/components/User’

// 懒加载方式

const Home = () => import(‘…/components/Home’)

const About = () => import(‘…/components/About’)

const User = () => import(‘…/components/User’)

八、路由嵌套

---

1、嵌套路由是一个很常见的功能

比如在home页面中，我们希望通过/home/news和/home/message访问一些内容；

一个路径映射一个组件，访问这两个路径也分别渲染这两个组件；

2、实现嵌套路由的两个步骤

1. 创建对应的子组件，并且在路由映射中配置对应的子路由；

2. 在组件内部使用标签；

3、嵌套路由代码实例

（1）index.js

// 配置路由相关的信息

import VueRouter from ‘vue-router’

import Vue from ‘vue’

const Home = () => import(‘…/components/Home’)

const HomeNews = () => import(‘…/components/HomeNews’)

const HomeMessage = () => import(‘…/components/HomeMessage’)

const About = () => import(‘…/components/About’)

const User = () => import(‘…/components/User’)

const Profile = () => import(‘…/components/Profile’)

// 1.通过Vue.use(插件), 安装插件

Vue.use(VueRouter)

// 2.创建VueRouter对象

const routes = [

{

path: ‘’,

// redirect重定向

redirect: ‘/home’

},

{

path: ‘/home’,

component: Home,

meta: {

title: ‘首页’

},

children: [

{

path: ‘news’,

component: HomeNews

},

{

path: ‘message’,

component: HomeMessage

}

]

}

]

const router = new VueRouter({

// 配置路由和组件之间的应用关系

routes,

mode: ‘history’,

linkActiveClass: ‘active’

})

// 3.将router对象传入到Vue实例

export default router

（2）Home.vue

我是首页

我是首页内容, 哈哈哈

新闻

消息

{{message}}