Vue 3.0 路由基本使用
路由基本使用下载Vue-Routernpm install vue-router配置路由router/index.jsimport VueRouter from "vue-router"import Vue from "vue"import Home from "@/components/Home"import About from "@/components/About"/*** 安装插件*/V
·
路由基本使用
下载Vue-Router
npm install vue-router
配置路由
router/index.js
import VueRouter from "vue-router"
import Vue from "vue"
import Home from "@/components/Home"
import About from "@/components/About"
/**
* 安装插件
*/
Vue.use(VueRouter)
/**
* 创建路由对象
* @type {*[]}
*/
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
/**
* 初始化路由 配置
* @type {VueRouter}
*/
const router = new VueRouter({
routes,
mode: 'history'
})
/**
* 导出路由
*/
export default router
main.js
import Vue from 'vue'
import App from './App.vue'
/**
* 导入路由
*/
import router from "@/router"
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
app.vue
<template>
<div id="app">
<div style="display: flex;flex-direction: row;height: 100%;width: 100%;">
<div style="height: 100%;background-color: antiquewhite;flex-grow: 1">
<ul style="padding: 0px">
<router-link tag="li" to="/home" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">首页</router-link>
<router-link tag="li" to="/about" style="height: 50px;list-style-type: none;width: 100%;display: flex;align-items: center;justify-content:center">关于</router-link>
</ul>
</div>
<div style="height: 100%;background-color: aqua;flex-grow:6;display: flex;flex-direction: column">
<div style="background-color: azure;flex-grow: 1">
我是面包屑
</div>
<div style="background-color: cornsilk;flex-grow: 15">
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app,body,html{
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
效果
更多推荐
已为社区贡献1条内容
所有评论(0)