admin管理员组文章数量:1633920
vue路由配置的介绍
内容:
页面关系如何管理?
路由
路由:
Vue中,我们可以通过vue-router路由管理页面之间的关系,让Vue.js构建单页面应用变得更加容易
操作步骤:
第一步:准备
安装路由npm install --save vue-router
准备两个简单的组件,放在src/view下
第二步:
在src/router/index.js
// 引入路由
import { createRouter, createWebHashHistory } from "vue-router";
// 引入页面
import baseView from "../view/baseView"
import aboutView from "../view/aboutView"
// 配置信息中需要的页面相关配置
//配置页面
const routes = [
{
path:"/", //访问的路径
component: baseView //对应的组件
},
{
path:"/about", //访问的路径
component: aboutView //对应的组件
}
]
// 创建路由
const router = createRouter({
// 访问方式
//
/*
createWebHashHistory
bash: http://localhost:8080/#/
about:http://localhost:8080/#/about
原理:a标签锚点连接
*/
/*
createWebHistory
bash: http://localhost:8080/
about:http://localhost:8080/about
此种方式,需要后台配合做重定向,否则会出现404问题
原理:H5 pushState()
*/
history:createWebHashHistory(),
// 路由配置信息
routes
})
export default router
第三步:
引入路由到项目
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from "./router" // index.js 是默认访问
// 明确安装路由功能
createApp(App).use(router).mount('#app')
第四步:
指定路由显示入口
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>
此时,可以通过输入不同的路由地址进行访问
第五步:
指定路由跳转,实现导航功能
<template>
<router-view></router-view>
<router-link to='/'>Base </router-link>
<router-link to='/about'> About</router-link>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>
总结
通过路由配置,实现导航功能
本文标签: 路由
版权声明:本文标题:38.Vue3:引入路由配置 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729176506a1188786.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论