# vue 基础

this.$route
//获取vue路由所带参
this.$route.query.id 

{
    path: '/hello/:id', // 动态的id
    name: 'Hello',
    component: HelloWorld,
    meta: {
        auth: true,
        keepAlive: false
    }
}
//参数值会被设置到 this.$route.params

// 解决：
// watch（监测变化） $route 对象
// beforeRouteUpdate 守卫2.2+
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}

const router = new VueRouter({
    routes: [{ 
        path: '/user/:id', 
        component: User,// 符号/会被当做根路径
        children: [{
            // 当 /user/:id/profile 匹配成功，
            // UserProfile 会被渲染在 User 的 <router-view> 中
            path: 'profile',
            component: UserProfile
        },{
            // 当 /user/:id/posts 匹配成功
            // UserPosts 会被渲染在 User 的 <router-view> 中
            path: 'posts',
            component: UserPosts
        }]
    }]
})

router.push(location, onComplete?, onAbort?)
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
<h1>Named Views</h1>
<ul>
<li>
<router-link to="/">/</router-link>
</li>
<li>
<router-link to="/other">/other</router-link>
</li>
</ul>
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</div>

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const router = new VueRouter({
    mode: 'history',
    routes: [{ 
        path: '/',
        // a single route can define multiple named components
        // which will be rendered into <router-view>s with corresponding names.
        components: {
            default: Foo,
            a: Bar,
            b: Baz
            }
        },{
        path: '/other',
        components: {
            default: Baz,
            a: Bar,
            b: Foo
        }
    }]
})

new Vue({
router,
el: '#app'
})

const router = new VueRouter({
    routes: [{
        path: '/a', redirect: to => {
        // 方法接收 目标路由 作为参数
        // return 重定向的 字符串路径/路径对象
        }
    }]
})

const router = new VueRouter({
routes: [{
     path: '/a', component: A, alias: '/b' 
     }]
})

export default {
    methodA : function(){},
    dataB : 'aaa'
}

install(Vue, options) {//创建一个全局组件
Vue.mixin({
    methods:{
        addPath(url){
            if(process.env.NODE_ENV === 'development'){
                return 'http://carowl.cn'+url
            }else{
                return Vue.prototype.$.host+url
            }
        }
    }
})
Vue.prototype.$ = {

}
}
//使用 this.addPath this.$.xxx

meta: {
    auth : false,
    keepAlive : true
}
<keep-alive v-if="$route.meta.keepAlive">
<router-view/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>

Vue.directive('scroll-save', {
    inserted(el) {
        el.addEventListener('scroll', function(e) {
        el.dataset.y = e.target.scrollTop;
        }, false);
    }
})
activated(){
    let el = document.getElementById('commend')
    el.scrollTop = el.dataset.y
}

//注册一个最简的自定义指令，直接在元素中v-focus就可以使用
Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
    console.log(el)
}
})

//但注意这是个私有api，随时都有可能变动，并且这种做法有违vue的理念。
new Vue({
    data: {
        value: 'demo'
    },
    created () {
        let dom = document.createElement('div');
        dom.innerHTML = '{{ value }}';
        this.$compile(dom);
    }
})

this.$emit(name,event)
this.$emit(name,[param1,param2])

this.prefer[index] = this.tool[item.sn]//不会触发刷新
// Vue.set 触发监听
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
example1.items.splice(newLength)
this.$set(this.carts, index, obj);

<input type="file" name="vr" @change="uploadVr" accept="">

var copy_ulr = this.$refs.vr_file.value.toLowerCase();
var suffix =copy_ulr.slice(copy_ulr.lastIndexOf('.'),copy_ulr.length)
console.log(suffix)

if(suffix === ('.zip' || '.rar') ){
this.vr_url = this.$refs.vr_file.value;
}else {

}

contenteditable="true"

@keydown="trySendMessage($event)" tabIndex="1"

v-bind:value="message" v-on:input="setMsg"

new Vue({
//选项
})