- 1.去除vue路由跳转地址栏后的哈希值#，我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值#
- 2.代码分割
- 3.vue中less编译配置
- 4.控制显示隐藏底部或头部组件
- 5.传递参数
- 6.保存userid类似数据在localStorage或者sessionStorage中
1.去除vue路由跳转地址栏后的哈希值#，我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值#
import Vue from 'vue'
//1.引入vue-router
import Router from 'vue-router'
import find from '../components/find'
import mall from '../components/mall'
import microshop from '../components/microshop'
import cloud from '../components/cloud'
import personalcenter from '../components/personalcenter'
//2.使用vue-router
Vue.use(Router)
//3.实例化router这个构造函数
let router = new Router({
//去掉地址中的哈希#
mode:"history",
//5.映射，什么样的地址跳转到什么样的page
routes:[
{
//根目录
path:'/',
name:'首页',
component:mall
},
{
//发现page
path:'/find',
name:'发现',
component:find
},
{
//微店page
path:'/microshop',
name:'购物袋',
component:microshop
},
{
//云仓page
path:'/cloud',
name:'云仓',
component:cloud
},
{
//我的page
path:'/personalcenter',
name:'我的',
component:personalcenter
}
]
});
//page跳转后title改变
router.afterEach(function (to) {
document.title = to.name
})
export default router
2.代码分割
// import Msite from '../pages/Msite/Msite.vue'
// import Order from '../pages/Order/Order.vue'
// import Search from '../pages/Search/Search.vue'
// import Profile from '../pages/Profile/Profile.vue'
// 打包时进行代码分割, 只有当需要时才从后台请求获取
const Msite=()=>import('../pages/Msite/Msite.vue')
const Order=()=>import('../pages/Order/Order.vue')
const Search=()=>import('../pages/Search/Search.vue')
const Profile=()=>import('../pages/Profile/Profile.vue')
3.vue中less编译配置
下载less和less-loader，在build中webpack.base.conf.js的module里配置
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
+ {
test: /\.less$/,
loader: ['style-loader','css-loader','less-loader'],
+ },
]
},
}
4.控制显示隐藏底部或头部组件
想控制哪个组件就在哪个组件上加 v-show="$route.meta.isShow"
在router/index中配置
routes: [
{
path: '/',
component: HelloWorld,
+ meta:{
isShow:true//默认为false显示，true为不显示
+ }
},
]
5.传递参数
<template>
<footer class="footer_guide border-1px">
<a href="javascript:;" class="guide_item " :class="{on:$route.path==='/msite'}" @click="goTo('/msite')">
<span class="item_icon">
<i class="iconfont icon-waimai"></i>
</span>
<span>外卖</span>
</a>
<a href="javascript:;" class="guide_item" :class="{on:$route.path==='/search'}" @click="goTo('/search')">
<span class="item_icon">
<i class="iconfont icon-search"></i>
</span>
<span>搜索</span>
</a>
<a href="javascript:;" class="guide_item" :class="{on:$route.path==='/order'}" @click="goTo('/order')">
<span class="item_icon">
<i class="iconfont icon-dingdan"></i>
</span>
<span>订单</span>
</a>
<a href="javascript:;" class="guide_item" :class="{on:$route.path==='/profile'}" @click="goTo('/profile')">
<span class="item_icon">
<i class="iconfont icon-geren"></i>
</span>
<span>我的</span>
</a>
</footer>
</template>
1）methods里定义函数
methods:{
goTo(path){
this.$router.replace(path)
}
}
2）动态控制类名
.guide_item
display flex
flex 1
text-align center
flex-direction column
align-items center
margin 5px
color #999999
&.on
color #02a774
6.保存userid类似数据在localStorage或者sessionStorage中
1）定义工具函数文件
/*
数据存储的工具模块
问题: 向外暴露一个函数(一个功能)还是一个对象(多个功能)?
*/
const TODOS_KEY='todos_key'
export default {
saveTodos(todos){//保存数据
window.localStorage.setItem(TODOS_KEY,JSON.stringify(todos))
},
readTodos(){
return JSON.parse(window.localStorage.getItem(TODOS_KEY)||'[]')
}
}
2）引入调用使用
App中读取
import storgeUtil from './util/storgeUtil'
export default{
data(){
return{
todos:storgeUtil.readTodos()
}
},
computed: {
completedCount () { // 完成的数量
return this.todos.reduce((preTotal, todo) => preTotal + (todo.completed?1:0), 0)
},