vue配置路由以及设置路径简写
程序员文章站
2022-04-15 21:57:34
1、关于路径简写：@是一个简写，指代src目录 设置简写的文件 build/webpack.base.config.js 2、我们也可以自己给常用的目录添加简写 3、在 src/main.js 中给主页添加index.scss样式，使用简写的路径表示 4、配置路由 src/app.vue
1、关于路径简写：@是一个简写，指代src目录
设置简写的文件 build/webpack.base.config.js
2、我们也可以自己给常用的目录添加简写
3、在 src/main.js 中给主页添加index.scss样式，使用简写的路径表示
4、配置路由
src/app.vue
<template>
<div id="app" class="g-container">
<div class="g-header-container">
头部导航
</div>
<div class="g-view-container">
<!-- 一级路由切换 -->
<router-view></router-view>
</div>
<div class="g-footer-container">
<tabbar />
</div>
</div>
</template>
<script>
import tabbar from 'components/tabbar';
export default {
name: 'app',
components:{
tabbar
}
}
</script>
<style scoped>
.g-container{
position: relative;
width:100%;
height:100%;
max-width:640px;
min-width:320px;
margin:0 auto;
overflow:hidden;
}
.g-header-container{
position:absolute;
left:0;
top:0;
width:100%;
z-index:999;
height:64px;
background:pink;
}
.g-view-container{
height:100%;
padding-bottom:50px;
background:lightblue;
overflow:auto;
}
.content{
height:2000px;
}
.g-footer-container{
position:absolute;
left:0;
bottom:0;
width:100%;
box-shadow:0 0 10px 0 hsla(0,6%,58%,0.6);
height:50px;
z-index:999;
background:lightgreen;
}
</style>
src/pages/home/index.vue
<template>
<div class="home">
<slider/>
<!-- 该页面自己的子路由 -->
<router-view></router-view>
</div>
</template>
<script>
import slider from 'components/slider';
export default {
name:"home",
components:{
slider
}
}
</script>
src/pages/product/index.vue
<template>
<div class="product">
product
</div>
</template>
<script>
export default {
name:"product"
}
</script>
<style lang="scss" scoped>
.product{
overflow:hidden;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
z-index:1200;
}
</style>
router/index.js
import vue from 'vue'
import router from 'vue-router'
import home from 'pages/home'
import product from 'pages/product'
vue.use(router)
export default new router({
routes: [
{
path: '/home',
name: 'home',
component: home,
children:[//二级路由
{
name: 'home-product',
path: 'product/:id',
component: product
}
]
},
{//其他路径全部统一跳转到首页
path: '*',
redirect: '/home'
}
]
})
效果图
5、当页面比较多的时候，直接显示可能有时并不太理想，可以考虑使用按需加载
修改router/index.js
import vue from 'vue'
import router from 'vue-router'
vue.use(router)
export default new router({
routes: [
{
path: '/home',
name: 'home',
component: ()=>import('pages/home'),//使用import动态引入，实现按需加载导航
children:[//二级路由
{
name: 'home-product',
path: 'product/:id',
component: ()=>import('pages/product')
}
]
},
{//其他路径全部统一跳转到首页
path: '*',
redirect: '/home'
}
]
})