【九月打卡】第13天 vue-router知识点串讲

• 课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack

• 课程章节： vue-router知识点串讲

• 主讲老师：双越

课程内容：

今天学习的内容包括：

vue-router知识点串讲

课程收获：

vue-router知识点串讲

安装

yarn add vue-router@4

引入

import { createRouter, createWebHashHistory } from 'vue-router';

// 创建路由实例并传递 `routes` 配置
const router = createRouter({
  // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes,
});

// 创建实例
const app = createApp(App);

//确保 _use_ 路由实例使整个应用支持路由。
app.use(router);

// 挂载根实例
app.mount('#app');
路由定义


// 这里单独定义了两个vue文件
import Home from '../components/Home.vue';
import About from '../components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

export default routes;

使用

<p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

今天学习课程共用了35分钟，重新了解了一下vue基本知识点，这是我不知道第多少次决心补习面试题，希望能够坚持下去。