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文件由三部分组成：