Vue组件、路由的简单使用

1.怎么使用Vue组件?

组件怎么用? 4个步骤

1. 创建模板<template>
2. 定义组件对象 const
3. 在Vue实例中注册 es6同名可省略value
4. 使用组件 在实例挂载范围内，以标签形式写上注册组件的名称 

2.父子组件怎么通信?

​ props/$emit

3.怎么使用路由?

​ 路由怎么用? 6个步骤

1. 引入路由Js

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  //vue 路由js
   

2. 创建组件对象

   const login = {
     template:'<h1>登录</h1>' //声明组件模板
   };
   
   const register = {
     template:'<h1>注册</h1>',
     data(){
         return{}
     }
     methods:{ }
   };
   
   

3. 定义路由对象，并定义规则

    //创建路由对象
   const router = new VueRouter({
     routes:[
       { path:'/',redirect:'/login'},  //path没写是默认路由,redirect: 默认路由重定向到哪个路由
       {path:'/login',name:login,component:login},   //path: 路由的路径   name：类似于id，唯一的名称   component:路径对应的组件名称
       {path:'/register',name:register,component:register}
        
         //除了上面的平级路由，还可以放子路由
        { //外层路由：里面有2个子路由，分别是add和edit
           path: '/edit',
           name: 'edit',
           component: products,
           children:[ //子路由 注意:子路由的path属性不能使用"/"开头
             {path: "add",name: "add", component: add},
             {path: "edit",name: "edit", component: edit}
            ]
        },
     ]
   });
   

4. 将路由对象注册到Vue实例

   const app = new Vue({
     el: "#app",
     data: {
       username:"小康",
     },
     methods: {},
     router:router   //设置路由对象，此时也可写成router,
   });
   

5. 使用：el挂载的div中，使用

   <!--显示路由的组件-->
   <router-view></router-view>
   

6. 切换路由【2种方式】：使用标签切换路由 ；通过事件函数的方式动态切换路由

   <!--方式一： 标签切换-->
   <router-link to="/login" tag="button">我要登录</router-link>
   <router-link to="name:register" tag="button">点我注册</router-link>
   <!--或者使用下面的方法 效果相同-->
   <a href="#/login">点我登录</a>
   <a href="#/register">点我注册</a>
   
    <!--方式二： 事件函数切换-->
    <button @click="test">切换路由</button>
   
   

	test(){
       //this.$router.push("/emps");// 代表切换路由路径[简写]
       //this.$router.push({path:'/users'});//路径方式切换路由 [全写]
        
        // [推荐]名称方式切换路由： 注意！多次切换相同路由会报错，建议加入手工判断或者官方代码
        if(this.$route.emps != Emps){ // 手工判断,Emps为路由的name，表示不是当前路由才去切换
          this.$router.push({name:"emps"});// 
		}  
    }
```



###  4.**路由怎么传参?** 

- ==第一种方式==传递参数 queryString传统方式

1. 切换路由时通过?号拼接参数

   ```html
    <router-link to="/login?id=21&name=zhangsan">我要登录</router-link>
   ```

2. 在组件中获取参数

   ```js
   const login = {
     template:'<h1>用户登录</h1>',
     data(){return {}},
     methods:{},
     created(){
       console.log("=============>"+this.$route.query.id+"======>"+this.$route.query.name);
     }
   };
   ```



- ==第二种方式==传递参数 restful

1. 通过使用路径方式传递参数

   ```js
   <router-link to="/register/24/张三">我要注册</router-link>
   
   var router = new VueRouter({
     routes:[
       {path:'/register/:id/:name',component:register}   //定义路径中绑定key,在router-link的to属性后面拼接对应参数，获取key
     ]
   });
   ```

2. 在组件中获取参数

   ```js
   const register = {
     template:'<h1>用户注册{{ $route.params.name }}</h1>',
     created(){
       console.log("注册组件中id:   "+this.$route.params.id+this.$route.params.name);
     }
   };
   ```

### 5. **嵌套路由**
5.