2019-07-03vue之路由

什么是路由

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

在 vue 中使用 vue-router

1.导入 vue-router 组件类库：

2.使用 router-link 组件来导航

登录
注册

3.使用 router-view 组件来显示匹配到的组件

4.注册组件

// 4.1 使用 Vue.extend 来创建登录组件
const login = {
     template: '
登录组件
'
}

// 4.2 使用 Vue.extend 来创建注册组件
const register = {
     template: '
注册组件
'
}

5.指定路由规则

var router = new VueRouter({
        routes: [
            { path: '/login', component : login },
            { path: '/register', component : register }
        ]
});

6.启用路由规则

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router // 启用路由，相当于router : router
});

路由携带参数

    
    
    
    


    

        
        登陆
        注册
        
        
    
    
    
    
    

路由的嵌套

    
    
    
    



    

        这是一个account
        
    





    
    
    

    

watch属性的使用

考虑一个问题：想要实现 名 和 姓 两个文本框的内容改变，则全名的文本框中的值也跟着改变；（用以前的知识如何实现？？？）
监听data中属性的改变：

computed计算属性的使用

    
    
    
    



    

        +
        =
        {{finalname}}----{{datetime}}
    
    
    

watch、computed和methods之间的对比
computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；