VUE 路由入门

FoamValue

发布于 2022-08-22 14:05:21

3220

发布于 2022-08-22 14:05:21

文章被收录于专栏：FoamValue

五一遇疫情 & 居家学VUE

一、前言

昨天，完成了从 Vue 创建、到用户输入的单页面功能。

今天引入了路由的概念，实现页面的超链接跳转功能。

二、安装 Vue Router

npm install vue-router@4

安装指令完成后，就可以在 node_modules 包下找到 vue-router 依赖。

三、基础语法

router-link，替换常用的 <a></a> 标签来实现超链接跳转页面。
router-view，将显示 router-link 跳转的内容。

四、效果如下

默认浏览器地址：

点击 `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 路由的简单实现，实际项目的应用需要使用到更高阶的路由知识，例如：动态匹配、嵌套路由等。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-05-01，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript