资讯专栏INFORMATION COLUMN

vue学习笔记(四)

frank_fun / 2871人阅读

摘要:提供了两种向组件传递参数的方式。子路由项路径不要使用开头,以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上,是通过不同的将这些资源加载后打包,然后输出打包后文件。

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