路由

vue-router 的基本使用

定义组件

var login = {
  template: "<h1>登录组件</h1>"
};

var register = {
  template: "<h1>注册组件</h1>"
};

定义 vue-router

var routerObj = new VueRouter({
  // 配置路由规则
  routes: [
    {
      path: "/login",
      // component 的属性值必须是一个组件的模板对象，不能是组件的引用名称
      // component: 'login' 就是错误的
      component: login
    },
    {
      path: "/register",
      component: register
    }
  ]
});

关联到 Vue 实例

new Vue({
  el: "#app",
  router: routerObj
});

实现

<div id="app">
  <a href="#/login">登录</a>
  <a href="#/register">注册</a>
  <!--    这是 vue-router 提供的元素-->
  <router-view></router-view>
</div>

效果展示

点击登录组件效果：

点击登录组件效果

点击注册组件效果：

点击注册组件效果

router-link 替换 a 标签

<a href="#/login">登录</a> 可以替换成 <router-link to="/login" tag="span">登录</router-link>。router-link 默认渲染成 <a></a> 标签，可使用 tag="span" 渲染成 <span></span> 标签。

redirect 重定向

// 在 routes 中定义
{
  path: '/',
  redirect: "/login"
}

路由传参

在 console 中输入 vm.$route 可详细查看。

使用 query 方式获取参数

<router-link to="/login?id=10">登录</router-link>

var login = {
  template: "<h1>登录组件 -- {{ $route.query.id }}</h1>",
  // 生命周期函数
  created() {
    console.log(this.$route.query.id);
  }
};

使用 params 方式获取参数

{
  path: '/login/:id',
  component: login
},

<router-link to="/login/10">登录</router-link>

var login = {
  template: "<h1>登录组件 -- {{ $route.params.id }}</h1>",
  // 生命周期函数
  created() {
    console.log(this.$route.params.id);
  }
};

路由的嵌套

routes: [
  {
    path: "/account",
    component: account,
    children: [
      {
        // 没有斜线
        path: "login",
        component: login
      }
    ]
  }
];

<router-link to="/account/login">Account</router-link>

命名视图

可以用命名视图实现首页经典布局。

image.png

<div id="app">
  <!--命名视图-->
  <router-view></router-view>
  <router-view name="left"></router-view>
  <router-view name="main"></router-view>
</div>

var routerObj = new VueRouter({
  // 配置路由规则
  routes: [
    {
      path: "/",
      components: {
        default: header,
        left: left,
        main: main
      }
    }
  ]
});

watch 监听

监听路由示例：

var vm = new Vue({
  el: "#app",
  watch: {
    "$route.path": function(newVal, oldVal) {
      console.log(newVal + "------" + oldVal);
    }
  }
});

监听文本数据：

<input type="text" v-model="firstname" />

var vm = new Vue({
  el: "#app",
  data: {
    firstname: ''
  }
  watch: {
    "firstname": function(newVal, oldVal) {
      console.log(newVal + "------" + oldVal);
    }
  }
});

上述代码也可以用 keyup 实现:

<input type="text" @keyup="getName" v-model="firstName" />

var vm = new Vue({
  el: "#app",
  data: {
    firstName: ""
  },
  methods: {
    getName() {
      console.log(this.firstName);
    }
  }
});

computed 监听

<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
<input type="text" v-model="fullName" />

var vm = new Vue({
  el: "#app",
  data: {
    firstName: "",
    lastName: ""
  },
  computed: {
    // fullName 的值在引用时会根据 firstName 和 lastName 重新计算并更新
    fullName: function() {
      return this.firstName + "-" + this.lastName;
    }
  }
});