vue路由使用及其组件

vue组件
组件的出现为了拆分Vue实例的代码量，来划分不同的功能模块
模块化：是从代码逻辑的角度进行划分，方便代码分层开发，保证吗，每个功能模块的功能单一
组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用
全局组件定义的三种方式
1，使用 Vue.extend 配合 Vue.component 方法：
“var login = Vue.extend({
template: ‘

登录

’
});
Vue.component(‘login’, login);”
2，直接使用 Vue.component 方法：
“Vue.component(‘register’, {
template: ‘

注册

’
});”
3，将模板字符串，定义到script标签种：
“”
4，同时，需要使用 Vue.component 来定义组件
“Vue.component(‘account’, {
template: ‘#tmpl’
});”

使用components属性定义局部子组件
先组件实例

引用组件：

**父组件传值给子组件** 父元素会覆盖子元素属性 class和style会合并，不会相互覆盖 props属性，接受父组件的值 // html部分

// 组件定义部分
var vm = new Vue({
el: ‘#app’,
components: {
son: {
template: ‘#myComTemp’,
// 定义父组件传过来的值
props: [‘parentMsg’, ‘list’]
}
}
})
设置传递类型
props: {
// 规定了父组件只能传对象类型
prop1:Object
// 可以设置多个类型，可以传Number也可以传String
parentMsg: [Number, String],
list: {
// 设置类型
type: Array,// [Array,String]
// 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的
default: function () {
return [{
name: ‘这个一个默认的名字’
}]
}
},
}
子组件给父组件传值
1.$emit方法第二个参数可以定义子组件给父组件传递的内容2.在父组件中怎么拿到这内容2.1父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到2.2父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

<template id='sonTemp'>
    <div>
        <button @click='clickSon'>点击事件</button>
        <button @click='clickSon2'>点击事件2</button>
        <h3>这是子组件的内容</h3>
    </div>
</template>

<script>
    var son = {
        template: '#sonTemp',
        methods: {
            clickSon() {
                console.log('子组件的方法');
                // 2. 在子组件中触发这个事件
                // 发射，触发
                // 通过这种方式，子组件也可以给父组件传值
                this.$emit('click-son', {
                    name: '张三'
                })
            },
            clickSon2(){
                console.log('子组件的方法2');
                this.$emit('click-son2', 'nihao')
            }
        },
    }

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            // e是接受子组件传过来的参数，msg是这个方法自己参数
            clickParent(e, msg) {
                console.log(e);
                console.log('父组件的方法,数据为：' + msg);
            },
            clickParent2(e) {
                console.log(e);
            }
        },
        components: {
            son
        }
    })
</script>

**ref的使用** *获取dom节点* 1.给dom节点记上ref属性，可以理解为给dom节点起了个名字。 2.加上ref之后，在$refs属性中多了这个元素的引用。 3.通过vue实例的$refs属性拿到这个dom元素。

获取组件
4.给组件记上ref属性，可以理解为给组件起了个名字。
5.加上ref之后，在$refs属性中多了这个组件的引用。6.通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。
路由的使用
1后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
2前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
3在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）
路由的基本使用方法
1引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
2创建路由new VueRouter(),接受的参数是一个对象
3在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4path属性是url的地址,component属性就是显示的组件（传组件的对象）
5创建的路由需要和vue实例关联一下
6路由到的组件显示在哪个位置
路由重定向
redirect可以进行路由的重定向
选中路由高亮
1.使用默认的样式
直接设置router-link-active
2.自定义样式
配置 linkActiveClass:‘自定义的类名’
定义参数
通过query的方式在url后加?参数名=参数的值
获取参数：$route.query.参数名\ast \ast 使用浏览器参数的方式传递参数\ast \ast 1.设置路由的时候/路由地址/:参数名2.获取参数$route.params.参数名
组建的嵌套
1.声明路由的时候设置children,这是children是一个数组，数组里是路由对象
2.这个children的组件就会渲染在它父组件的中
Computed用法
默认只有getter的计算属性：

+ = {{fullName}}

​

定义有getter和setter的计算属性：