vue进阶 - vue-router安装及使用

官方文档地址：https://router.vuejs.org/zh-cn/

介绍

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

安装

直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
NPM
在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里，然后使用以下命令进行安装:

npm install vue-router

安装成功后， 可以查看package.json文件，你会发现多了"vue-router": "^3.0.1"的配置。如下：

"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},

如果在一个模块化工程中使用它，在必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router' //ES6语法导入
Vue.use(VueRouter) //注册

如果采用vue-cli脚手架安装，安装的时候会自带vue-router,main.js文件中引用

import router from './router' //ES6语法导入
new Vue({
  el: '#app',
  router, //注册
  template: '<App/>',
  components: { App }
})

使用

router/index.js文件，管理路由器的创建：
第一步：加载模块

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../views/home/index' // import命令加载这个模块
import indexHome from '../views/home/children/index'
import addHome from '../views/home/children/add'

第二步：

Vue.use(Router) //注册

第三步：定义路由,包括二级路由

export default new Router({
 //mode:'history',
 routes: [ {
   path: '/',
   name: 'Index',
   component: Index,
   children:[
    {path:'',component:indexHome}, {path:'add',component:addHome}
  ] },
})
第四步：使用定义好的路由
第一种使用方式：

<router-link to='/'>首页</router-link>
<router-link to='/add'>子页面</router-link>

第二种使用方式

this.$router.push('/')
this.$router.push('/add')

History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
建议：后台在没有配置的情况下，不建议开启history 模式，否则项目编译过后的页面打开空白，本地运行正常。
更多资料建议查看官方文档