vue路由--参数获取、dom元素获取、给dom元素添加事件

Vue-router中的对象
$route 路由信息对象，只读对象
$router 路由操作对象，只写对象

一、参数的获取

1、路由对象配置

var Router = new VueRouter({
    // 配置路由规则
    routes:[
        // 路由对象有了名称就等于有了变量名，router-link只需要说明这个变量名即可
        {name:"login", path:"/login", component:Login},
        {name:"register",path:"/register/:name", component:Register}
    ]
})

2、路由跳转
query,params都是传递的参数

var App = {
    template:`<div>
        <!--内置组件,要加：相当于绑定一个属性，避免被做为字符串解析-->
        <router-link :to="{name:'login',query:{id:1}}">登录去</router-link>
        <router-link :to="{name:'register', params:{name:'abc'}}">注册去</router-link>
           <router-view></router-view>
        </div>`
}

3、参数的获取、在路由的组件中，this.$route获取参数

var Login = {
    template:`<div>登录界面</div>`,
    created() {
        console.log(this.$route.query)
    }
}
var Register = {
    template:`<div>注册界面</div>`,
    created() {
        console.log(this.$route.params)
    }
}

二、获取DOM元素

1、在组件的DOM部分，任意标签中 写上 ref=‘xxx’
2、通过组件对象 this.$refs.xxx 获取到元素

简单demo（结合钩子函数）

// 子组件 供$refs获取
let TemComponent = {
    template:`
        <div>我是子组件 </div>
    `
}
// 声明全局组件
Vue.component('temp',TemComponent);
let App = {
    template:`
        <div>
            <temp ref='tmp'/>
            <button ref='btn'>我是按钮</button>    
        </div>
    `,
    beforeCreate() {
        // 这里不能操作数据，知识初始化了事件等
        // this.$xxx这种是vue提供的
        //console.log(this.$refs.btn)  // undefined
    },
    created() {
        // 可以操作数据了
        //console.log(this.$refs.btn)
    },
    beforeMount() {
        // new Vue 发生装载 替换<div id='app'></div> 之前
        //console.log(this.$refs.btn)
    },
    mounted() {  // 此处才能获取到this.$refs.btn
        // 装载数据之后
        //console.log(this.$refs.btn)
        console.log(this.$refs.tmp) // 输出一个vue组件
        console.log(this.$refs.tmp.$el) // Dom对象

    },
}

// $属性：$refs 获取组件内的元素
// $parent: 获取当前组件对象的父组件
// $children: 获取子组件
// $root: 获取new Vue的实例
// $el: 组件对象的DOM元素 


new Vue({
    el:'#app',
    components:{
        app:App
    },
    template:`<app/>`
})

三、给DOM元素添加事件的特殊情况

在vue真正渲染DOM到页面以后，才做的的事
需要使用this.$nextTick，表示下一次的渲染，

this.$nextTick(function(){
   this.$refs.input.focus();
})

错误写法，直接操作，是没有效果的

this.$refs.input.focus();

demo

let App = {
    template:`
        <div>
            <input type='text' v-if='isShow' ref='input'/>   
        </div>
    `,
    data(){
        return{
            isShow: false
        }
    },
    mounted() { 
        // 装载数据之后
        //显示元素，并给与获取焦点
        this.isShow = true; // 会触发input元素的插入
        this.isShow = false;
        this.isShow = true;
        // 最终代码执行完毕之后，vue才会根据实际的值，
        // 进行DOM的操作

        // 给input元素获取焦点--不会出来因为不是立即渲染的
        // this.$refs.input.focus();

        // 在vue真正渲染DOM到页面以后，才做的的事
        // 表示下一次的渲染
        this.$nextTick(function(){
            this.$refs.input.focus();
        })
    },
}

new Vue({
    el:'#app',
    components:{
        app:App
    },
    template:`<app/>`
})