关于vue全家桶

1. vue全家桶包含哪些模块

   • vue-cli vue脚手架
   • vue-router 路由
   • axios http请求
   • vuex 状态管理（操作公用数据）
   • UI库（element-ui）

2. vue脚手架下，src文件夹下包含哪些文件，作用分别是什么？

   • assets文件夹：一般放置图片
   • components文件夹：放置所有自行编写的组件
   • router文件夹：在index.js下进行路由配置
   • App.vue 主组件，所有的组件可以通过路由加载到该组件进行统一渲染
   • main.js进行全局配置的文件（引入第三方库和框架）

3. vue组件在脚手架中一个组件引入其他组件时，怎么应用

   import 组件名 from 路径;

   Components:{组件名}//挂载组件

4. 组件传值

5. ref的作用

   选取真实DOM，在节点上绑定ref属性:

   <div ref="属性名"></div>
   

   选取时，this.$refs.属性名=属性值

6. 路由基础搭建

   1. Router下index.js引入对应的组件

   2. 在APP.vue下写入router-link to = “/”

   3. 路由动态传参:path对应动态路径 /list/:id
      在组件中使用$route.params. 动态的内容接收参数

7. 通配符*创建404页面,当路径匹配不到时,自动匹配*跳转到404页面

   <mark>404路由写在其他路由后</mark>

8. 子路由搭建

   {主路由，children:[{path:“路径”,component:组件}]}

   在<mark>主路由的</mark>页面中使用router-link 和router-view呈递子路由页面

9. 编程式的导航：就js方法实现跳转

   router.push(路径)

   //this.$router.push({ name: ‘User’, params: { userId: ‘Home传递123’ }})

   router.push({name:‘user’,params:{传递的参数}})

   router.replace( ) //不会向history添加新纪录，而是跟它的方法名一样，替换掉当前的history记录

   router.go() 历史记录的前进后退

10. name属性：命名路由

11. 命名视图：同一页面同时加载多个视图模块

在index.js下:
<router-view  name="a"></router-view>
routers:[
{
	path:"/",
components:{
	default:foo,
	a:bar
}
}
]
在app.vue下：
 <router-view name="a"/>
 <router-view name="b"/>

11. redirect：重定向{}

    {
          path: '/',
          redirect: '/home'
        } //redirect重定向
    	//当地址为/时，也会重定向跳转到/home
    

12. alias:别名,相当于把path的路径取一个别的名字，但是跳转的时候显示的还是该组件

13. 路由可以进行props传值，在组件只能怪使用props接收

14. 导航守卫:

    全局前置守卫:beforeEach,进行全局拦截，所有页面均不能查看

    全局后置钩子：afterEach

    路由独享的守卫:beforeEnter，进行某一个页面的拦截

    组件内前置守卫:beforeRouteEnter

    组件内变更守卫:beforeRouteUpdate

    组件内后置守卫:beforeRouteLeave

    组件内前置守卫 
    beforeRouteEnter(to,from,next){
          next((v)=>{
           console.log(v.num)
         })
         }
    to：Route即将要进入的目标路由对象
    form：Router当前导航正要离开的路由
    next：通行证，可传入路径，布尔值
    

15. 过渡动效

    <transition name ="fade">
      <router-view></router-view>
    </transition>
    <style>
    (动效css)
    </style>
    

16. 滚动行为

    index.js下:
    写在routes:[]外
    scrollBehavior(to,from,savePosition){
    //savePosition:前进后退按钮时使用
    if(to.path=='/login'){
    	return { x:0,y:100}
    }else if(to.path=='/home'){
    	if(to.hash){
    	//进行锚点链接操作
    return {
    	selector ：to.hash
    }
    }
    }
    在home下:
      <p id="mao" style="color:#fff">锚点位置</p>//定义锚点
    在app.vue下： /home#id
    <router-link to="/home#mao">home</router-link>