Vue CLI 3.0介绍：
https://cli.vuejs.org/zh/guide/
Vue CLI 3.0配置参考
https://cli.vuejs.org/zh/config/
https://youzan.github.io/vant/#/zh-CN
hub.com/shimiso/VueFrameWork
https://shimiso.github.io/VueFrameWork/dist/#/
https://github.com/shimiso/VueDemo
这是我们组内搞的vue的学习视频，40节课demo，一周上手，2周出活
https://edu.csdn.net/course/detail/5342
vue路由配置
index.js 中引入文件 import Reg from '@/components/Reg'
配置路由
export default new Router({
routes: [
{
path: '/',
component: HelloWorld,
},
{
path: '/login',
component: Login,
},
{
path: '/reg',
component: Reg,
},
]
})
3.创建文件
<template>
<div>
<ComHeader></ComHeader>
注册内容
<ComFooter></ComFooter>
</div>
</template>
<script>
</script>
<style scoped>
</style>
Vue 公用文件配置
创建公用文件 Footer.vue
<template>
<div>
<p>我是尾部组件</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped></style>
2. 引入文件
import ComHeader from './components/common/Header'
import ComFooter from './components/common/Footer'
3.注册标签
export default {
name: 'App',
components:{
ComHeader,
ComFooter,
}
}
4.引入标签
<ComFooter></ComFooter>
守卫
全局守卫(main.js)
router.beforeEach((to, from, next) => {
//会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
alert(111);
next();
})
独享路由守卫
export default new Router({
routes:
[
{
path: '/',
component: HelloWorld,
},
{
path: '/login',
component: Login,
beforeEnter: (to, from, next) => {
// ..
console.log('经过路由守卫');
}
},
{
path: '/reg',
component: Reg,
},
{
path: '/user',
component: User,
},
]
})
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
