五一遇疫情 & 居家学VUE
一、前言
昨天,完成了从 Vue 创建、到用户输入的单页面功能。
今天引入了路由的概念,实现页面的超链接跳转功能。
二、安装 Vue Router
npm install vue-router@4
安装指令完成后,就可以在 node_modules 包下找到 vue-router 依赖。
三、基础语法
四、效果如下
默认浏览器地址:
点击 `home` 超链接,浏览器地址发生改变,并在指定位置显示超链接内容:
点击 `about` 超链接,浏览器地址发生改变,并在指定位置显示超链接内容:
五、代码实现
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
runtimeCompiler: true
})
main.js
import { createApp } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import App from './App.vue';
// 1. 定义路由组件.
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. 定义一些路由
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About },
];
// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: createWebHashHistory(),
routes, // `routes: routes` 的缩写
});
// 5. 创建实例
const app = createApp(App);
// 6. 整个应用支持路由。
app.use(router);
// 7. 挂载根实例
app.mount('#app')
HelloWorld.vue
<div>
<router-link to="/home">home</router-link>
</div>
<div>
<router-link to="/about">about</router-link>
</div>
<div>
<router-view></router-view>
</div>
实际使用过程,路由的超链接内容可以替换为相应的单页面:
import HomeView from './view/HomeView.vue';
import AboutView from './view/AboutView.vue';
const routes = [
{ path: '/home', component: <HomeView /> },
{ path: '/about', component: <AboutView /> },
];
六、总结
以上是 Vue 路由的简单实现,实际项目的应用需要使用到更高阶的路由知识,例如:动态匹配、嵌套路由等。