vue学习笔记（四）

一、vue-router

1、简介

我们经常使用vue开发单页面应用程序（SPA）。开发SPA过程中，路由必不可少，vue的官方推荐是vue-router。单页面应用程序看起来好像是一个页面，其实是在一个页面中切换不同的html部分，从而达到所谓的单页面,在这切换之中，就需要使用路由来实现不同的页面内容的展现。

2、基本用法

（1）.使用步骤

vue-router的基本使用步骤如下：

• 定义需要切换的组件
• 配置路由，规定路径到组件的映射关系
• 创建路由实例
• 将路由挂载到vue实例

//1.定义组件，用于路由切换
var Home = {
    template: '
我是主页
'
}
var News = {
    template: '
我是新闻
'
}

//2.配置路由
const routes = [{
        path: '/home',
        component: Home
    },{
        path: '/news',
        component: News
    },{ //这一路由配置用于首次访问或者找不到所请求路由，自动跳转home页
        path: '*',
        redirect: '/home'
}];

//3.创建路由实例
var router = new VueRouter({
    routes  //传入配置好的路由信息
});

//4.挂载路由到根组件
new Vue({
    el: '#app',
    router 
});

这样我们就配置好了一个完整的路由。在切换组件的时候会根据路由加载不同的组件。我们使用类似a标签的触发组件的切换，to属性存放的是路径。使用来显示所切换组件。

    主页
    新闻

    

这样我们就可以实现主页和新闻组件间的切换。

（2）.参数传递

可能我们需要向所切换组件传递参数。vue提供了两种向组件传递参数的方式。

• 查询字符串的形式
• • /home?name=dawei&pwd=666
• • 在组件内部使用{{$route.query}}接收参数
• rest风格
• • /news/param1/param2
• • 在组件内部使用{{$route.params}}接收参数

（3）.路由嵌套

路由还可以多层嵌套使用，使用children属性。

{
    path:'/user',
    component:User,
    children:[
        {
            path:'login',  
            component:Login
        },
        {
            path:'regist',
            component:Regist
        }
    ]
}

子路由项路径不要使用/开头，以 /开头的嵌套路径会被当作根路径。

在组件中就可以使用该路由：

    
用户信息
    

        用户登陆
        用户注册
    
    

注意路径的写法。

3、路由实例的方法

这里学习两个路由实例的方法：router.push()和router.replace()。

• router.push()：添加路由，功能上与相同
• router.replace()： 替换路由，不产生历史记录

router.push({path:'home'})

router.replace({path:'user'})

4、路由结合动画

路由结合动画使用很简单，我们可以用 组件给它添加一些动画效果：

二、单文件组件

1、.vue文件

.vue文件称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js代码。

.vue文件由三部分组成：