继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

浪里个浪小白龙
关注TA
已关注
手记 75
粉丝 3
获赞 4
  • 课程名称:前端框架及项目面试 聚焦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基本知识点,这是我不知道第多少次决心补习面试题,希望能够坚持下去。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP