vue2.0 vue-router学习笔记

最近在学习vue.js 2.x。vue-router是其中十分重要的一部分。

在以前的学习中，用过很多后端的路由，比如在laravel框架中，路由的功能是根据前端不同的URL请求，根据路由匹配将请求分发到不同的中间件、方法等。而vue-router是一个前端路由，即是根据不同的路径来决定该加载什么组件。

vue-router的安装：如果在初始化vue-cli的时候，安装了vue-router，就不用重复安装。如果未安装，切换至项目目录下，输入npm install vue-router --save，安装完成。

vue-router的使用：

第一步、首先需要引入并使用该全局组件。如下：

import Router from 'vue-router'
Vue.use(Router)

第二步、初始化router实例、如下：

let router= new Router({
	mode: 'history',
  routes: [
    {
      path: '/',
     
      component: IndexPage
    }]
})

mode有'hash'和'history'两种，和后端配置有关，默认为hash。routes是一个由path（路径）,component(要加载的组件)为键的对象所组成的数组。（注意是routes）

第三步、router的使用。

在需要使用路由的组件中，加入router,如下：

new Vue({
  el: '#app',
  router,//es2015的写法，等同于router:router
  template: '<Layout/>',
  components: { Layout }
})

在使用该路由的组件中，使用<router-view></router-view>这个内置组件来装载需要加载的组件，实际效果是该内置组件会被替换成为路由所匹配的组件，如上的<Indexpage></Indexpage>。

同样，如果需要使用类似于href的链接来进行页面间的跳转（实际为加载不同的组件），可以使用<router-link></router-link>内置组件，该组件需要绑定属性，v-bind:to={path:'xxxx'}(简写为:to={path:'xxxxxx'})。

第四步：路由子节点

在实际使用时，路由是多层的，例如访问/detail路径时，加载到一个详情界面，而/detail/apple需要跳转到苹果的详情，/detail/orange需要跳转到橘子的详情。

vue-router的解决方式是建立路由的子节点，如下：

routes: [
    {
      path: '/detail', 
      component: DetailPage,
      children: [
       	{
	      path: 'apple',
	     
	      component: ApplePage
   		},
   		{
	      path: 'orange',
	     
	      component: OrangePage
   		}
      ]
    }
  ]

同样，在DetailPage这个组件中需要使用<router-view></router-view>这个组件来加载不同的组件。（注意：子节点中的path应该为相对路径，不需要加/）。

第五：路由重定向

比如在设计用户登录模块时，如果用户未登陆的状态下访问，需要将用户的访问页面重定向到登陆界面。如下设置路由：

routes: [
 
    {
      path: '/detail', 
      redirect: '/login' ,
     
    }
  ]

在访问/detail时，会重定向跳转到/login。

如有不正确的，希望各路大神指正