Vue2.0学习笔记（二）--路由与页面间导航

一、vue-router

1.安装
npm install vue-router -D
2.使用
vue-router 是一个插件，需要在 Vue 的全局引用中通过 Vue.use()将它引用到 Vue 实例当中。在我们的工程中。main.js是程序入口文件，所有的全局性配置都会放在这里面。
3.路由配置
页面就是组件，那么一个路由定义就该与一个组件相对应。第一个页面应该是“首页”，也就是默认路由。
4.配置一个简单的路由
准备两个页面，格式相同即可：

在 main.js 中

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: {
    App
  }
})

在 router.js 中配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import Explorer from '@/components/Explorer'
import Cart from '@/components/Cart'
import Me from '@/components/Me'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    }, {
      path: '/explorer',
      name: 'explorer',
      component: Explorer
    }
  ]
})

以后凡是遇到配置文件，就可以单独配置，在 main.js 中仅引用配置到全局变量。

二、路由的模式

1.URL

• history 地址模式：http://localhost/home
• 非 history 地址模式：http://localhost/#home
  2.三种模式详解
• Hash：使用 URL hash 值来作为路由。支持所有浏览器，包括不支持 HTML5 History API 的浏览器。
• History：依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
• Abstract：支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器 API，路由会自动强制进入这个模式。
  模式配置方式：

export default new VueRouter({
    mode: 'history',
    routes: [
        {
          path: '/home',
          name: 'home',
          component: Home
        }, {
          path: '/explorer',
          name: 'explorer',
          component: Explorer
        }
      ]
    })

三、路由与导航

1.vue-router 提供的两个指令标签

• ——渲染路径匹配到的视图组件，它还可以内嵌自己的，根据嵌套路径渲染嵌套组件。
• ——支持用户在具有路由功能的应用中（点击）导航。

使用的形式而不用，给每一个路由取一个名字，避免更改路由时需要再改导航的路径。
2.指定输出元素
不指定输出元素时，代码最终的输出结果会是：

    

       
 
 
3.动态路由
 
 
routes:[{
    name: 'BookDetails',
    path: '/book/:id',
    component: BookDetails
}]
 
 
在参数名之前加上“:”，然后将参数写在路由的 path 内。
 在中我们可以加入一个 params 的属性来指定具体的参数值：
 
 


 
 
参数值的读取方式：
 
 
export default {
    created () {
        const bookID = this.$router.params.id
    }
}
 
 
 
  
使用路由参数时，例如从/books/1导航到/books/2，原来的组件实例会被复用，比起销毁再创建复用则显得更加高效，不过，这也意味着组件的生命周期钩子不会被重复调用，也就是说created、mounted 等钩子函数在页面第二次加载时会失效。那么，当组件复用时，想对路由参数的变化做响应的话，就需要在 watch 对象呗添加$route 对象变化的跟踪函数:
 
 
 
 
export default {
    template: '...',
    watch: {
        '$route' (to, from) {
            // 对路由变化作出响应
        }
    }
}
 
 
4.前套路由
 在 route.js 的配置中，要显示子视图与子路由的对应。利用 children 数组属性就可以定义子路由了。
 
 
routes:[{
    name: 'Main',
    path: '/',
    component: Main,
    children: [
        {name: 'Home', path: 'home', component: Home,}
    ]
}]
 
 
 
  
子路由中的路径就不需要加上"/"了，生成时主路由的 path 会被自动添加到自路由前。另外，以"/"开头会被当做根路径，就不要加"/"了。
 
 
 
 
5.切页动画
 Vue 提供了 transition 的封装组件。
 有4个（CSS）类名在 enter/leave 的过度中切换：
 
 
 
  
CSS 类名-enter
 
  
CSS 类名-enter-active
 
  
CSS 类名-leave
 
  
CSS 类名-leave-active
 
 
 
 
四、导航状态样式
 
 
当用户点击 Tabs 上的任意一个标签组件时，组件应该进入一个“激活”状态。在默认情况下对应的路由匹配成功，就会自动设置 class 属性值为.router-link-active，如果我们想设置“激活”状态样式类名为 active，可以通过 active-clas 属性进行设置。
 
 


 
 
但如果要在页面上这样显示声明，每一个都写一个，这样就不 DRY 了。所以，可以在 router.js 中配置一下语句：
 
 
const router = new VueRouter ({
    // ...省略
    linkActiveClass: "active"
})
 
 
 
  
样式激活是依据对 URL 的全包含匹配，也就意味这"/"跳转到别的路由依旧会保持“激活”状态。在这种情况下就需要使用精确匹配模式，使用 exact 属性。
 
 
 
 


 
 
五、History 的控制
 
 
当我们在使用 HTML5的 History 模式的时候，每次路由的改变都会被“推”（push）到导航历史中保留，在某些情况下我们并不需要浏览器这样做，而是希望他能将原有的记录进行替换。
 首先，需要了解 用两种属性来调用 Vue 实例内$router 对象的三个方法：
 
 
 
  
 
   
 
    
router 的方法
 
    
属性
 
    
说明
 
   
 
  
 
  
 
   
 
    
push()
 
    
—
 
    
默认调用此方法
 
   
 
   
 
    
append()
 
    
append
 
    
将目标 URL 追加到当前 URL 下
 
   
 
   
 
    
replace()
 
    
replace
 
    
以目标 URL 替换现有的 URL
 
   
 
  
 
 
 
 
设置 replace 就会调用 router.replace() 而不是 router.push()，于是导航后就不会留下 History 记录。
 
 


 
 
设置 append 属性后，则在当前（相对）路径前添加基本路径。例如，从 /a 导航到相对路径 b，如果没有配置 append，则路径为 /b，如果配置了，则为 /a/b。
 
 
六、关于 Fallback
 
 
当使用 History 模式的时候，点击会自动调到相应的路径，但是在浏览器直接输入" http://loacalhost/home"则会404，因为浏览器直接将这个地址发向服务器。
 解决办法是将所有发到服务器端的请求利用服务器端的 URLRewrite 模板重新转发给/index.html。
 常见：
 Apache
 在配置文件中加入 URLRewrite模块配置
 Nginx
 将404页面自动重定向到/index.html
 Node.js(Express)
 安装 Fallback 插件
 注意
 一旦配置，服务器将不再返回404错误页面，为避免这种情况，应该在 Vue 应用里覆盖所有的路由情况，然后在给出一个404页面。
 
 
const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '*', component: NotFoundComponent}
    ]
})