web前端全系列 教程
1839个小节阅读:2243.7k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
用 Vue + Vue Router 创建单页应用非常简单:通过 Vue.js,我们已经用组件组成了我们的应用。当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们
npm install vue-router@4 --save
xxxxxxxxxx
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter,createWebHashHistory } from "vue-router"
import Home from "./pages/Home.vue"
import About from "./pages/About.vue"
const routes = [
{
path:"/",
component:Home
},
{
path:"/about",
component:About
}
]
const router = createRouter({
// 路由地址访问方式 # /
// 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式
history: createWebHashHistory(),
routes
})
const app = createApp(App)
app.use(router)
app.mount('#app')
xxxxxxxxxx
<template>
<h3>Home首页</h3>
</template>
xxxxxxxxxx
<template>
<h3>About关于页面</h3>
</template>
xxxxxxxxxx
<template>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</template>
router-view
router-view
将显示与 url 对应的组件。你可以把它放在任何地方,以适应你的布局
router-link
请注意,我们没有使用常规的 a
标签,而是使用一个自定义组件 router-link
来创建链接。
这使得 Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码
我们将在后面看到如何从这些功能中获益
实时效果反馈
1.在Vue路由中,实现页面跳转下列是哪一个:
A router
B router-view
C router-link
D createRouter
答案
1=>C